目前网上关于搭建一个前端环境的方法很多,我这里总结合并,并根据自己的实际搭建情况简单介绍一下。
搭建一个简单的前端开放环境,由于各个公司各个业务的不同,选取的框架都不一样,环境搭建要依据实际情况来操作。
最近恰好公司开发新项目,后端选择使用Scala,我们都知道,一般会选择sbt对scala代码进行编译、测试、打包等。但它明显不擅长处理有关前端的任务,前端一些常见的任务,如js库的下载和管理、css文件的转换、js文件合并压缩、js测试的执行等,很难在sbt中找到好用的插件,所以这里我打算搭建一个前端的开发环境。
先介绍一下这次搭建的几个主角:
Grunt – Js任务管理工具。相当于scala中的sbt。
Bower – Js库依赖管理工具。比如:当你需要jquery时,不需要手动下载,只需要执行bower install jquery
RequireJs – Js库加载管理,及模块化支持。可以按需及并行加载js库,可以把我们的代码以模块化的方式组织。
AngularJs – Js前端框架,支持依赖注入,双向绑定等我认为很重要的功能。
这几套东西目前用的比较广泛,配套资源完善,较为成熟,可行性较大。
对了,这里提一下,我这里的操作都是紧接这我上次搭建好的grunt环境继续进行的,你可以先进行grunt环境的搭建:
参考这里:http://blog.csdn.net/lensgcx/article/details/53996589
好了,现在我们按部就班开始搭建前端环境。
一、安装nodejs
在下载nodejs时候,应注意:1.最新版本的尽量别用,2.奇数版本号的版本被认为是不稳定的开发版,不过从官网上下载下来的应该都是偶数的稳定版。
本例子,nodejs的版本为:node-v4.4.5-x64
安装时,点击下一步到底即可。
安装完成后,在制台中输入“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功。
npm -v
二、搭建一个项目
按照下图建立一个文件项目
三.安装msysgit
在安装bower之前,我们需要安装msysgit(windows系统下)。
为什么要安装git?因为bower管理的包的源码都是托管在github网站上, 我用的是win7.1, 所以这里要安装git for windows,
下载地址:https://git-for-windows.github.io/
下载好之后,安装,下一步到底,注意下图选择中间选项,然后把它安装好。
四.安装bower
bower 跟 npm 在某种意义上相似,它是用来管理常用的js库的依赖的,比如jquery, underscore, angularjs等。
我们可以通过npm安装它,把它装为全局工具,输入:
npm install bower -g
五:为bower生成配置文件bower.json
这里我们简单一点配置,bower也有它自己的配置文件bower.json
,我们不需要手动创建。在控制台对应路径输入:
bower init
然后一路回车到底,然后确定
"name": "template", "description": "", "main": "", "license": "MIT", "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], }
六:下载requirejs、jquery、angularjs、underscore
bower install angularjs --save-dev
bower install angularjs --save-dev
bower install jquery underscore --save-dev
将会自动下载jquery,require等,放到angularjs相应的文件,到项目根目录下的bower_components
目录。打开bower
.
json
,你会发现里已经添加:
"dependencies": { "angularjs": "~1.2.20", "jquery": "~2.1.1", "requirejs": "~2.1.14" }
这里注意:
git config --global url."https://".insteadOf git://
然后在重新安装一下
七、安装grunt-bower-task
bower_components
目录,然后我们会发现,下载下来的一个文件里面有很多的我们不需要的,如何把我们需要的相关内容提炼出来,放到我们项目实际指定的目录下,比如
template/js/lib
目录下,这里我们就要用到这个插件。
npm install grunt-bower-task --save-dev
打开
Gruntfile.js
,在里面添加:
bower: { install: { options: { targetDir: './src/js/lib',/*拷贝bower默认安装包(自动过滤不必要的文件夹)到你指定的文件夹中*/ layout: 'byType', /*有两种形式:byType 和 byComponent,两者的区别就是生成的目录结构不一致, 当然也可以自定义函数*/ install: true,/*是否需要执行安装(基于bower.json)*/ verbose: false, cleanTargetDir: false,//在安装bower依赖管理之前是否清除targetDir cleanBowerDir: false,//在拷贝需要文件到指定的目录的时候是否需要清除bower默认安装文件夹(bower_components) bowerOptions: {} } } },
在Gruntfile.js下方位置添加:
grunt.loadNpmTasks('grunt-bower-task');
八、简单介绍配置RequireJs
RequireJs可用来管理页面中使用的js库之间的依赖关系,可以按需、并行、延迟加载js库。同时它可以让我们以模块化的形式组织js代码。前面我们第三方的依赖,通过grunt-bower-task拷贝到了template/js/lib
目录下。我们自己写的js,将会放置在template/js
目录下。我们需要手动创建一个config.js
文件,用来配置和初始化requirejs。
1、建立hello.js文件
我的hello.js文件是放在template/js下的,在里面写入:
/** * Created by 西兰花的春天 on 2017/1/6. */ define([], function() { return { hello: function() { console.log("hello, requirejs,my name is ‘西兰花的春天’); console.log(bye); } } });
2、建立bye.js文件
我的bye.js文件是放在template/js下的,在里面写入:
/** * Created by 西兰花的春天 on 2017/1/6. */ var bye = "see you again.";
3、建立index.html文件
在里面写入如下内容:
头部引入:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script src="src/js/lib/requirejs/require.js" data-main="src/js/config.js"></script> </head> <body> <div style="margin: 50px"> <div>你好,我叫西兰花的春天</div> </div> </body> </html>
<script src="src/js/lib/requirejs/require.js" data-main="src/js/config.js"></script>
这里首先加载了require.js,并通过data-main
属性告诉requirejs:当你加载完以后,请加载config.js文件进行初始化。
我这里的config.js文件是放在template/js下的,写入如下内容:
/** * Created by 西兰花的春天 on 2017/1/6. */ requirejs.config({ baseUrl: 'src/js', paths: { hello: 'hello', jquery: 'lib/jquery/jquery', angular: 'lib/angular/angular', require: 'lib/requirejs/require' }, }); requirejs(['hello','bye'], function(hello) { hello.hello(); }); );
我在paths
中声明了几个模块,其中的hello
是我们自己创建的js文件,用于放我们自己的业务代码,它对应于/template/js/hello.js
. jquery,require
与angular
对应的文件是我们使用grunt-bower-task 拷贝过来的第三方js库。
shim
中用来处理一些没有遵守requirejs规范的js库,比如underscore
之类。可在里面对它们进行一些依赖声明、初始化操作等。这里暂时用不上。
最后用requirejs
来导入我们自己的模块,可在后面的callback中拿到对应模块的实例,并对它进行一些操作,比如我们调用了hello.hello()
方法。
requirejs(['hello','bye'], function(hello) { hello.hello(); });
简单点的表述为:
define(['angular'], function(angular) { angular.module('myApp', []) .controller('MyController', ['$scope', function ($scope) { $scope.name = 'Change the name'; }]); angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); });
这里的 requirejs提供的函数。requirejs 一共提供了两个全局变量: 是
- requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
- define:定义一个模块。
http://www.oschina.net/translate/getting-started-with-the-requirejs-library
https://zhuanlan.zhihu.com/p/22775050
http://www.tuicool.com/articles/jam2Anv
https://www.npmjs.com/package/bower-require
5、启动 web server
进入项目根目录,运行:
grunt bower
或者
grunt
把bower下载的js库拷贝到template/js/lib
下。
然后启动web server:
python -m SimpleHTTPServer
这里没有下载配置python的,点击这里:https://www.python.org/downloads/
安装好之后,在环境变量里加上相关路径,然后就好了(有些情况下,要重启计算机)
最后打开浏览器,我这里是本地服务器xamp下的,访问:
http://localhost/template/
如果一切正常的话,控制台会有信息,上面有 2条console.log信息 ,分别为:
hello, requirejs,my name is ‘西兰花的春天’
see you again.
九、配置Angularjs
我们做一个简单的angular的例子。由于 angularjs 并不是按 requirejs 的模块方式组织代码的,我们需要在config.js中添加:
在index.html中添加angular代码shim: { angular : { exports : 'angular'}}
Angularjs 会在全局域中添加一个名为angular的变量。我们必须在shim中显式把它暴露出来,才能通过模块注入的方式使用它,比如:
在index.html中加入如下代码:define(['angular_test'], function(ng) { // we can use argument `ng` instead of gloabl `angular` now });
接下来,我们要准备相应的controller。<div style="margin: 50px"> <div>你好,我叫西兰花的春天</div> <br> <span>你的姓名:</span> <div ng-controller="MyController"> <input type="text" ng-model="name" /> <span id="template1" class="ng-cloak">{{name}}</span> </div> </div>
在 template/js 目录下建立一个 angular_test.js 文件。
然后在里面添加内容:
/** * Created by 西兰花的春天 on 2017/1/6. */ define( [ 'angular' ], function( angular ) { angular.module( 'yourName', [] ) .controller( 'MyController', [ '$scope', function( $scope ) { $scope.name = 'Input your name'; } ] ); angular.element( document ).ready( function() { angular.bootstrap( document, [ 'yourName' ] ); } ); } );
在这段代码里,我定义了一个angularjs自己的模块yourname
,以及相应的MyController
。在后面,通过angular.bootstrap
方法,把该模块与document
结合在了一起。
在浏览器中输入地址:
http://localhost/template/
就可以看到效果了。当我们修改了页面上输入框里的内容,它旁边的文字也会跟着改变。
十、修改angularjs的占位符
在html中显示angularjs里的一个字段时,我们使用{{}}
来占位,比如:
<span>{{name}}</span>
如果我们同时使用了mustcahe (介绍:http://www.iinterest.net/2012/09/12/web-template-engine-mustache/)模板,就会有冲突。我们可以更改 angularjs 的配置:
angular.module('myApp', []).config(function($interpolateProvider){ $interpolateProvider.startSymbol('[[').endSymbol(']]'); } );
然后我们就可以写成:
<span>[[name]]</span>
十一、后记
这个搭建的环境是比较基础的,也算可以入个门,实际项目开发环境的搭建还有很多需要更改完善的地方。
我们搭建好grunt,然后安装bower包管理系统,npm下载的组件放在bower_components目录下,我们通过bower-task组件吧下载的文件包里面的核心文件(项目需要的)copy移动到我们制定的项目文件下,然后再通过require()异步加载js模块,这过程中,浏览器不会失去响应;只有前面的模块都加载成功后,它指定的回调函数才会运行,这也解决了js模块的依赖性的问题。
同时在grunt下,做到了自动化监控文件变化,实时进行压缩打包混淆相关文件到指定目录,方便我们在项目中调用。