项目目录，js源文件
gruntest
Gruntfile.js
package.json
-- js
ext
community_plugin.js
glogin_frm_cover.js
iLogin.js
kkpv.js
lnk_plugin.js
md5.js
storyleak_plugin.js
tabSwitch.js
-- 5.2
js
download_main.js
mp4
js
kankan_commercial_mp4.js
kankan_page_mp4.js
kkc.js
kkcs.js
我用grunt简单的完成以下任务，
1. js/ext/(community_plugin.js、iLogin.js、lnk_plugin.js、tabSwitch.js)压缩到js/*-min.js ，js/ext/(glogin_frm_cover.js、kkpv.js、md5.js、storyleak_plugin.js) 压缩合并到js/exm-min.js
2. 5.2/js/download_main.js压缩到5.2/js/download_main-min.js
3. 5.2/mp4/js/*.js压缩到5.2/mp4/js/*-min.js
任务配置文件Gruntfile.js语法
grunt.initConfig({
js_exm_dir:{ //全局变量、自定义
src:['js/ext/glogin_frm_cover.js','js/ext/kkpv.js','js/ext/md5.js','js/ext/storyleak_plugin.js'],
dest:'js/exm-min.js'
},
concat: { //任务concat
options: {
//任务配置
},
js_exm: { //子任务，自定义
options和文件 ，子任务的option会覆盖任务option
}
}
});
1)<%= %>读取变量值,最外层要有''包围！
2)可直接在子任务中配置文件
1. concat: {
js_exm: {
src:['src/b1.js','src/b2.js'],
dest:'dest/a1.js'
}
}
2.jshint:{ //只有src可以采用此方式
with_overrides:['js/**/*.js'],
}
3.jshint:{ //只有src可以采用此方式
with_overrides:'js/**/*.js',
}
3)另外子任务属性files有三种方式配置文件
1.concat: {
js_exm:{
files:{
'dest/a1.js':['src/b1.js','src/b2.js'],
'dest/a1.js':['src/c1.js','src/c2.js']
}
}
}
2.concat: {
js_exm:{
files:[
{dest:'dest/a1.js',src:['src/b1.js','src/b2.js']},
{dest: 'dest/a1.js',src:['src/c1.js','src/c2.js']}
]
}
}
3.jshint：{
with_overrides: {
files: {src: ['js/**/*.js']}
}
}
除了dest、src还有其他属性filter、nonull、dot、matchBase、expand。
源文件是多个文件时对文件列表进行平行展开即：['src/a.js','src/b.js','src/c.js']与[['src/a.js','src/b.js'],'src/c.js']是等效的。
另外有几种路径短配符*（匹配多个字符除/）、？（匹配单个字符除/）、**（匹配多个字符）、{}（用，隔开的or语句）、！（表示不匹配此路径）
下面介绍几种任务模块
1）文件合并
首先安装插件，在任务目录下 npm install grunt-contrib-concat --save-dev
concat: {
options: {
separator: ';' ,
banner: '/*! <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
js_exm:{
dest:'<%= js_exm_dir.dest %>',src:'<%= js_exm_dir.src %>'
}
},
2）文件压缩
首先安装插件，在任务目录下 npm install grunt-contrib-uglify --save-dev
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
js_exm_min: {
files: {
'js/exm.min.js': ['<%= concat.js_exm.dest %>']
}
}
}
3）代码优化
首先安装插件，在任务目录下 npm install grunt-contrib-jshint --save-dev
最后要注册插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
及注册任务
grunt.registerTask(taskname, [description,],tasklist)
如： grunt.registerTask('build', ['concat','uglify','jshint']);
另外可以注册任务的子任务只选择子任务运行如： grunt.registerTask('build-exm', ['concat:js-exm','uglify','jshint:with_overrides']);
运行命令为
可以利用grunt-api自定义任务，比如定义一个压缩单个js的任务
grunt.registerTask('ug-js', ['uglify:js_min']);
grunt.registerTask('ug-single','uglify single js',function(src,dest){
grunt.config('tmpsrc',src);
grunt.config('tmpdest',dest);
grunt.task.run('ug-js');
});
uglify: {
js_min:{
files:{'<%= tmpdest %>':'<%= tmpsrc %>'}
}
},
运行命令为
传入的参数不能有''。
还有一种从命令行传入参数进而定义一个压缩单个js的方式为：
var src = grunt.option('src');
var dest = grunt.option('dest');
grunt.config('tmpsrc',src);
grunt.config('tmpdest',dest);
运行命令为
传入的参数不能有''。
Gruntfile.js代码如下：
module.exports = function(grunt) {
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
js_exm_dir:{ //全局变量、自定义
src:['js/ext/glogin_frm_cover.js','js/ext/kkpv.js','js/ext/md5.js','js/ext/storyleak_plugin.js'],
dest:'js/exm.js'
},
concat: { //任务concat
options: { //配置
separator: ';' ,
banner: '/*! <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
js_exm:{ //子任务js_exm options和文件 ，子任务的option会覆盖任务concat全局option
dest:'<%= js_exm_dir.dest %>',src:'<%= js_exm_dir.src %>'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
js_exm_min: {
files: {
'js/exm-min.js': ['<%= concat.js_exm.dest %>']
}
},
js_min_test:{
files:[
{dest:'js/community_plugin.js',src:'js/ext/community_plugin.js'},
{dest:'js/iLogin.js',src:'js/ext/iLogin.js'},
{dest:'js/lnk_plugin.js',src:'js/ext/lnk_plugin.js'},
{dest:'js/tabSwitch.js',src:'js/ext/tabSwitch.js'}]
},
js_min:{
files:{'<%= tmpdest %>':'<%= tmpsrc %>'}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
beforeconcat: ['Gruntfile.js'],
options: {
// options here to override JSHint defaults
"-W099":true,
"-W100":true,
globals: {
//module: true
}
},
with_overrides: {
options: {
"-W002":true,
"-W004":true,
"-W009":true,
"-W027":true,
"-W030":true,
"-W032":true,
"-W033":true,
"-W038":true,
"-W041":true,
"-W044":true,
"-W049":true,
"-W051":true,
"-W053":true,
"-W057":true,
"-W058":true,
"-W060":true,
"-W061":true,
"-W065":true,
"-W069":true,
"-W075":true,
"-W082":true,
"-W083":true,
"-W084":true,
"-W088":true,
"-W107":true,
"-W120":true,
ignores:['Gruntfile.js','js/exm-min.js'],
},
files: [
{src: ['js/**/*.js']},{src:['5.2/**/*.js']}
],
}
},
watch: {
files: ['<%= jshint.with_overrides.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('build-exm', ['concat:js_exm','uglify:js_exm_min']);
grunt.registerTask('ug-js', ['uglify:js_min']);
grunt.registerTask('ug-single','uglify single js',function(src,dest){
grunt.config('tmpsrc',src);
grunt.config('tmpdest',dest);
grunt.task.run('ug-js');
});
var src = grunt.option('src');
var dest = grunt.option('dest');
grunt.config('tmpsrc',src);
grunt.config('tmpdest',dest);
}
package.json代码如下：
{
"family": "test",
"version": "0.0.1",
"name": "gruntTest",
"spm": {
"alias": {
"jquery": "gallery/jquery/1.8.2/jquery",
"dialog": "dist/styles/component/dialog/src/dialog"
}
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-qunit": "~0.3.0",
"grunt-contrib-watch": "~0.5.3"
}
}