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"
  }
}