grunt轻松入门

项目目录，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"
   }
 }