Grunt 和 Bower 用法学习

关于自动化问题

清理临时文件，校验代码，连接并压缩javascript文件，拷贝资源文件和配置文件，运行测试等。
Automating the workflow with Grunt

Grunt 通过可以总过组件来任意的组织要执行的任务。已经自定义自己的组件。

npm install -g grunt-cli grunt

配置：

Gruntfile.js

module.exports = function(grunt){

//1 - Configuring each task

grunt.initConfig({});

//2 - Loading the plug-ins

grunt.loadNpmTasks('plugin name');

//3 - Creating a workflow by grouping tasks together

grunt.registerTask('taskName',['task1','task2','task3']);

}

将所有的脚本都串联到一个文件将大大减少页面加载时请求的数量，从而提高性能。

压缩过程将会去除所有空格，断行，以及注释内容，将本地变量和函数的名变为短名字，这样减少了字节数来提高性能。

HTML和CSS文件也可以被缩小，图片也可以通过特定的压缩而优化。

1、清理：清理上一次部署时产生的文件，grunt-contrib-clean插件，需要配置清理那个文件路径下的文件，

npm intall grunt-contrib-clean --save-dev

module.exports = function(grunt){

grunt.initConfig({

clean:{

dist:["dist/"]

}

});

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

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

}

2、语法校验: grunt-contrib-jshint

npm install grunt-contrib-jshint --save-dev

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

我们需要在配置时需要通过concat对象的src属性指定源文件和dest属性指定单一的目标文件。

module.exports = function (grunt) {

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、压缩文件：grunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

需要配置uglify对象的src和dest属性

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-contrib-copy --save-dev

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-karma

需要配置 karma.conf.js 文件

npm install grunt-karma --save-dev

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: "karma.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有一个web server插件叫做 grunt-connect

npm install grunt-contrib-connect --save-dev

我们这里需要配置部署的基础路径以及服务运行的端口

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: "karma.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"])

}

默认情况下，服务只有在Grunt运行时才能运行，所以我们要使用connect任务的keepalive选项。

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"

}

}

npm install

9、执行工作流

grunt <name of the task or workflow>

可以定义多个运行环境

connect: {

production: {

options: {

port: 9001,

base: 'dist/'

}

},

development: {

options: {

port: 9002,

base: '/'

}

}

}

我们也可以生成两个串联文件，一个是sources另一个是libraries.

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管理包：

Bower是由Twitter创建用于前端应用的包管理。它只处理JavaScript类库，以及HTML，CSS和images

安装： npm install -g bower

查找包： bower search <package name>

安装包：bower install <package name>

bower install <package name> --save

将从Git仓库下载内容放入bower_components/ 目录下，使用 --save时 bower.json 会被更新。

查看安装包：bower list

更新安装包： bower update<package name>

卸载安装包：bower uninstall <package name> --save

在我们安装一个包后，需要更新我们的index.html文件来将它包含到当前应用程序中。

<script src="bower_components/angular/angular.min.js"></script>

移除的包会保存在Bower的缓存中，在用户的主文件夹的cache/bower目录下

我们可以查看缓存的内容：

bower cache list

bower 还支持离线安装：bower install angular --offline

清除bower的缓存

bower cache clean