前端开发自动化工具Grunt和bower

自动化工作流

我们的产品基于复杂的流程，有很多步骤需要执行，比如从最后一次部署清理临时文件。
校验代码，连接和最小化javascript文件，拷贝图片，配置文件等资源文件，运行测试等等其它工作。

根据环境的不同，工作流的内容也可能有所不同。
使用Grunt自动工作流
使用Bower管理包

Grunt是一个JavaScript任务运行器，它自动运行重复的繁杂的任务。
它也可以将希望被执行的任务打包成任何序列，来创建工组流。

基于插件工作，它有一个庞大的生态系统拥有成千上万的可下载的插件选择。
我们也可以创建自己的插件并共享到社区。

npm install -g grunt-cli grunt

Gruntfile.js 文件是用JavaScript定义的每个任务，插件和工作流的配置。

module.exports = function(grunt){
//1-- 配置每个任务
grunt.initConfig({
});

//2-- 加载插件
grunt.loadNpmTasks('plugin name');

//3-- 通过对任务分组创建一个工作流
grunt.registerTask('taskName',['task1','task2','task3']);
}
可以通过 npm init 生成下面的依赖管理文件：
package.json

创建一个分发包：
在向生产环境部署之前，我需要创建一个优化的分发包：
性能：通过连接步骤，我们可以大大减少浏览器请求次数。
应用程序所有的脚本都可以被连接成一个文件。
接着是缩小步骤，移除文件中所有的空白，行间隔，评论，替换本地变量和函数使它们
比原来定义更短一些。这样通过减少需要传递的字节数来提高性能。
HTML和CSS文件也需要被缩小，图片可以通过特定的处理器优化。
Grunt有许多处理以上任务的插件可以下载使用。

安全：通过移除空格，行段，评论和替换本地变量名，javascript文件变的更加难以理解。
我们应该使用数组来定义依赖机制，将每个依赖定义成字符串。

质量：这里有两个步骤来提高分发内容的质量。第一个校验步骤，比如JSLint或者JSHint。

1、清理安装
首先清理我们上一次安装的文件，它可以通过插件grunt-contrib-clean来完成。
注意哪些需要配置哪些目录，防止一些文件被错删。
安装该插件： npm install grunt-contrib-clean --save-dev

安装之后我们需要配置它：
Gruntfile.js

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.registerTask("dist",["clean"]);
}

这里我们创建了分发文件包位于dist/目录下。

2、校验步骤：校验我们使用插件 grunt-contrib-jsint
通过如下命令安装它：
npm install grunt-contib-jsint --save-dev

然后再gruntfile.js文件中对其进行配置

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
all:['Gruntfile.js','js/**/*.js','test/**/*.js']
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");

grunt.registerTask("dist",["clean","jshint"]);
}

3、连接阶段：通过插件grunt-contrib-concat ,连接配置设置的原文件成一个目标文件。
该插件安装命令：
npm install grunt-contrib-concat --save-dev

接下来在gruntfile.js文件中配置该插件：
我们通过concat对象的src属性设置源文件目录，通过dest属性设置目标文件目录。

module.exports = function(grunt0{
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
},
concat:{
dist:{
src:["src/**/*.js"],
dest:"dist/js/scripts.js"
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");

grunt.registerTask("dist", ["clean", "jshint", "concat"]);
}

4、Minifying 步骤：
缩小步骤，包括去掉空格，换行符，评论，替换变量和函数名等操作。
这些都可以使用插件 grunt-contrib-uglify 完成
npm install grunt-contrib-uglify --save-dev

配置该插件，跟grunt-contrib-concat类似，需要定义uglify对象的src和dest属性。
Gruntfile.js

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
},
concat:{
dist:{
src:["js/**/*.js"],
dest:"dist/js/scripts.js"
}
},
uglify:{
dist:{
src:["dist/js/scripts.js"],
dest:"dist/js/scripts.min.js"
}
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");

grunt.registerTask("dist",["clean","jshint","concat","uglify"]);
}

5、拷贝步骤，有许多文件比如images，fonts等其它需要无损的拷贝的文件。
可以使用grunt-contrib-copy插件来定义完成，它能够拷贝文件夹和文件。
npm install grunt-contib-copy --save-dev

配置信息：
Gruntfile.js

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
},
concat:{
dist:{
src:["js/**/*.js"]
dest:"dist/js/scripts.js"
}
},
uglify:{
dist:{
src:["dist/js/scripts.js"],
dest:"dist/js/scripts.min.js"
}
}，
copy:{
dist:{
src:["index.html","lib/*","partials/*","css/*"],
dest:"dist/"
}
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");

grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy"]);
}

6、测试步骤：
Grunt调用grunt-karma插件通过读取karma.conf.js 文件，并运行测试。
插件安装：npm install grunt-karma --save-dev
在Gruntfile.js文件中我们只需要配置Karam的配置文件位置即可。

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
},
concat:{
dist:{
src:["js/**/*.js"],
dest:"dist/js/scripts.js"
}
},
uglify:{
dist:{
src:["dist/js/scripts.js"],
dest:"dist/js/scripts.min.js"
}
},
copy:{
dist:{
src:["index.html","lib/*","partials/*","css/*"],
dest:"dist/"
}
},
karma:{
dist:{
configFile:"karam.conf.js"
}
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-karma");
grunt.registerTask("dist", ["clean", "jshint", "concat",
"uglify", "copy", "karma"]);
}

7、运行阶段：
作为最后一个可选步骤，是在分发包被编译后运行应用程序。
Grunt有一个服务器插件 grunt-connect
安装它： npm install grunt-contrib-connect --save-dev

在Gruntfile.js文件中对服务插件进行配置：
module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
},
concat:{
dist:{
src:["js/**/*.js"],
dest:"dist/js/scripts.js"
}
},
uglify:{
dist:{
src:["dist/js/scripts.js"],
dest:"dist/js/scripts.min.js"
}
},
copy:{
dist:{
src:["index.html","lib/*","partials/*","css/*"],
dest:"dist/"
}
},
karam:{
dist:{
configFile:"karam.conf.js"
}
},
connect:{
dist:{
options:{
port:9001,
base:'dist/'
}
}
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-karma");
grunt.loadNpmTasks("grunt-contrib-connect");

grunt.registerTask("dist",["clean","jshint","concat","uglify","copy","karma","connect:dist:keepalive"]);
}

注意在配置 connect运行时需要使用keepalive否则服务只会在Grunt运行时运行。

所有插件安装完成后的package.json 文件内容：
{
"name": "parking",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-karma": "~0.8.3",
"karma": "~0.12.16",
"grunt-contrib-connect": "~0.8.0"
}
}

我们还可以直接创建package.json文件，然后运行 npm install 来一次性完成安装。

执行工作流：

grunt <name of the task or workflow>

比如执行一个清理任务：

grunt clean

我们可以为每个任务定义多个配置文件，比如connect 服务
connect: {
production: {
options: {
port: 9001,
base: 'dist/'
}
},
development: {
options: {
port: 9002,
base: '/'
}
}
}

我们还可以生成两个连接文件，一个是源代码连接文件，一个是类库连接文件。
concat: {
js: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
},
lib: {
src: ["lib/**/*.js"],
dest: "dist/lib/lib.js"
}
}

运行命令： grunt concat

或者分别执行：
grunt concat:js
grunt concat:lib

使用Bower进行包管理
Bpwer是Twitter推出的包管理器，聚焦于前端应用。

安装 bower

npm install -g bower

查找包
bower search <package name>

安装包
bower install <package name>

bower install angular --save

该angular包惠被从Git库中下载并存放到bower_components/ 目录下。
--save 指令用于更新bower.json 文件。

我们可以通过
bower list
查看下载的包列表

更新包
bower update <package name>

卸载包
bower uninstall angularjs-file-upload --save

使用包：
<script src="bower_components/angular/angular.min.js"></script>

缓存
移除的包会在Bower的缓存中有残留，位于用户的 home 文件夹的 cache/bower 目录下，我们可以通过如下指令
查看
bower cache list

Bower还可以离线安装包，只需要执行如下命令
bower install angular --offline

清理缓存包并删除所有下载包
bower cache clean