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
中的配置信息,然后执行你所指定的任务。
一般步骤
- 将命令行的当前目录转到项目的根目录下。
- 执行
npm install
命令安装项目依赖的库。 - 执行
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