grunt轻松入门

最新推荐文章于 2024-11-14 21:01:59 发布

afeizhong6575

最新推荐文章于 2024-11-14 21:01:59 发布

阅读量87

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/xuntu/p/3360224.html

版权

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

download_main.js

mp4

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代码如下：

  1 module.exports = function(grunt) {
  2  
  3   grunt.initConfig({
  4     pkg:grunt.file.readJSON('package.json'),
  5     js_exm_dir:{                                  //全局变量、自定义
  6        src:['js/ext/glogin_frm_cover.js','js/ext/kkpv.js','js/ext/md5.js','js/ext/storyleak_plugin.js'],
  7        dest:'js/exm.js'
  8     },
  9     concat: {                       //任务concat
 10       options: {                    //配置
 11         separator: ';' ,
 12         banner: '/*! <%= grunt.template.today("dd-mm-yyyy") %> */\n'
 13       },     
 14       js_exm:{                                //子任务js_exm options和文件 ，子任务的option会覆盖任务concat全局option
 15          dest:'<%= js_exm_dir.dest %>',src:'<%= js_exm_dir.src %>'      
 16       }
 17     },
 18     uglify: {
 19       options: {
 20         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
 21       },
 22       js_exm_min: {
 23         files: {
 24           'js/exm-min.js': ['<%= concat.js_exm.dest %>']
 25         }
 26       },
 27       js_min_test:{
 28          files:[
 29            {dest:'js/community_plugin.js',src:'js/ext/community_plugin.js'},
 30            {dest:'js/iLogin.js',src:'js/ext/iLogin.js'},
 31            {dest:'js/lnk_plugin.js',src:'js/ext/lnk_plugin.js'},
 32            {dest:'js/tabSwitch.js',src:'js/ext/tabSwitch.js'}]
 33       },
 34       js_min:{
 35        files:{'<%= tmpdest %>':'<%= tmpsrc %>'}
 36       }
 37     },
 38     qunit: {
 39       files: ['test/**/*.html']
 40     },
 41     jshint: {
 42       beforeconcat: ['Gruntfile.js'],
 43       options: {
 44         // options here to override JSHint defaults
 45         "-W099":true,      
 46         "-W100":true,
 47         globals: {      
 48             //module: true        
 49         }
 50       },
 51       with_overrides: {
 52           options: {           
 53             "-W002":true,
 54             "-W004":true,
 55             "-W009":true,
 56             "-W027":true,
 57             "-W030":true,
 58             "-W032":true,
 59             "-W033":true,
 60             "-W038":true,
 61             "-W041":true,
 62             "-W044":true,
 63             "-W049":true,
 64             "-W051":true,
 65             "-W053":true,
 66             "-W057":true,
 67             "-W058":true,
 68             "-W060":true,
 69             "-W061":true,
 70             "-W065":true,
 71             "-W069":true,
 72             "-W075":true,
 73             "-W082":true,
 74             "-W083":true,
 75             "-W084":true,
 76             "-W088":true,               
 77             "-W107":true,  
 78             "-W120":true,  
 79             ignores:['Gruntfile.js','js/exm-min.js'],                              
 80           },
 81           files: [
 82           {src: ['js/**/*.js']},{src:['5.2/**/*.js']}
 83           ],
 84        }         
 85     },
 86     watch: {
 87       files: ['<%= jshint.with_overrides.files %>'],
 88       tasks: ['jshint', 'qunit']
 89     }
 90   });
 91  
 92   grunt.loadNpmTasks('grunt-contrib-uglify');
 93   grunt.loadNpmTasks('grunt-contrib-jshint');
 94   grunt.loadNpmTasks('grunt-contrib-qunit');
 95   grunt.loadNpmTasks('grunt-contrib-watch');
 96   grunt.loadNpmTasks('grunt-contrib-concat');
 97  
 98    
 99   grunt.registerTask('build-exm', ['concat:js_exm','uglify:js_exm_min']);
100   grunt.registerTask('ug-js', ['uglify:js_min']);
101   grunt.registerTask('ug-single','uglify single js',function(src,dest){   
102      grunt.config('tmpsrc',src);
103      grunt.config('tmpdest',dest);
104      grunt.task.run('ug-js');   
105   });
106   var src = grunt.option('src');
107   var dest = grunt.option('dest');
108   grunt.config('tmpsrc',src);
109   grunt.config('tmpdest',dest);
110    
111 }

package.json代码如下：

 1 {
 2   "family": "test",
 3   "version": "0.0.1",
 4   "name": "gruntTest",
 5   "spm": {
 6     "alias": {
 7       "jquery": "gallery/jquery/1.8.2/jquery",
 8       "dialog": "dist/styles/component/dialog/src/dialog"
 9     }
10   },
11   "devDependencies": {
12     "grunt": "~0.4.1",
13     "grunt-contrib-concat": "~0.3.0",
14     "grunt-contrib-uglify": "~0.2.4",
15     "grunt-contrib-jshint": "~0.6.4",
16     "grunt-contrib-qunit": "~0.3.0",
17     "grunt-contrib-watch": "~0.5.3"
18   }
19 }