grunt自动化工具

标签：

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

安装 CLI

首先，需要先将Grunt命令行（CLI）安装到全局环境中。

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

CLI 是如何工作的

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。

如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务。

一般步骤

1. 将命令行的当前目录转到项目的根目录下。
2. 执行npm install命令安装项目依赖的库。
3. 执行 grunt 命令。

准备工作

一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

{ "name": "my-project-name",

　　"version": "0.1.0",

　　"devDependencies": {

　　　　"grunt": "~0.4.5",

　　　　"grunt-contrib-jshint": "~0.10.0",

　　　　"grunt-contrib-nodeunit": "~0.4.1",

　　　　"grunt-contrib-uglify": "~0.5.0"

　　}

}

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。

例如：npm install grunt-contrib-jshint --save-dev

Gruntfile文件案例

文件合并：将src目录下的a.js,b.js,c.js合并dest目录的abc.js

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
concat: {
options: {
separator: ‘;‘
},
dist: {
src: [‘src/a.js‘, ‘src/b.js‘, ‘src/c.js‘],
dest: ‘dest/abc.js‘
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
// 默认任务
grunt.registerTask(‘default‘, [‘concat‘]);
}

文件压缩：

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
preserveComments: ‘all‘, //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip
//美化代码
beautify: {
//中文ascii化，非常有用！防止中文乱码的神配置
ascii_only: true
}
},
build: {
src: ‘src/<%=pkg.file %>.js‘,
dest: ‘dest/<%= pkg.file %>.min.js‘
},
buildall1: {//任务三：按原文件结构压缩js文件夹内所有JS文件
files: [{
‘dest/a.min.js‘: ‘src/a.js‘,
‘dest/b.min.js‘: ‘src/b.js‘,
‘dest/c.min.js‘: ‘src/c.js‘,
}]
},
buildall2: {//任务三：按原文件结构压缩js文件夹内所有JS文件
files: [{
expand:true,
cwd:‘src‘,//js目录下
src:‘**/*.js‘,//所有js文件
dest: ‘dest‘//输出到此目录下
}]
},
release: {//任务四：合并压缩a.js和b.js
files: {
‘dest/ab.min.js‘: [‘dest/a.min.js‘, ‘src/b.min.js‘]
}
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// 默认任务
grunt.registerTask(‘default‘, [‘uglify‘]);

// 默认任务（指定执行顺序）
/* grunt.registerTask(‘default‘, [‘uglify:release‘]);
grunt.registerTask(‘mina‘, [‘uglify:builda‘]);
grunt.registerTask(‘minb‘, [‘uglify:buildb‘]);
grunt.registerTask(‘minall‘, [‘uglify:buildall‘]);*/

}

参考：http://www.gruntjs.net/getting-started

grunt自动化工具

标签：

原文地址：http://www.cnblogs.com/jzxx/p/5696821.html