前端打包构建工具grunt快速入门(大篇幅完整版)

打包的目的和意义就不用叙述了直接上干货

http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行。本文将grunt打包的常用方法都用实例描述,更加清晰易懂。

 

1.    第一个简单的grunt打包


 1)需要安装nodejs:http://www.cnblogs.com/chuaWeb/p/nodejs-npm.html

  本人的nodejs工程目录为F:\chuaNodejs(后续所有相对路径都是相对于这个目录)

2)命令行到nodejs目录(需要系统管理员权限,不然后续过程中会报错)执行npm install -g grunt-cli

3)在nodejs工程目录下建一个package.json,内容为

{
  "name": "my-first-grunt",
  "file": "jquery",
  "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"
  }
}

  其中file属性在Gruntfile.js中要用到的属性,打包源名称

  然后将devDependencies下面的包给下载下来,比如下载grunt: npm install grunt --save-dev 其他包下载方式一样

  需要注意的是package.json中的数据必须是严格的json数据格式(连添加注释都是不可以的)。

4) 在nodejs工程目录下建一个Gruntfile.js,内容为

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中
 5     uglify: {
 6       options: {
 7         banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 8       },
 9       build: {
10         src: 'src/<%=pkg.file %>.js',
11         dest: 'dest/<%= pkg.file %>.min.js'
12       }
13     }
14   });
15   // 加载提供"uglify"任务的插件
16   grunt.loadNpmTasks('grunt-contrib-uglify');
17   // 默认任务
18   grunt.registerTask('default', ['uglify']);
19 }

  里面pkg读取package.json文件,然后可以访问其内容中的属性,如pkg.file。build属性src是待压缩的文件,dest是压缩重定向到该文件。

  所以现在我要建立一个src目录,目录下面保存了一个叫做jquery.js的文件

5)命令行运行:grunt

  输出

Running “uglify:build” (uglify) task
File dest/jquery.min.js created: 277.14 kB ->93.35 kB
>> 1 file created. 
Done.

  创建了dest/jquery.min.js

  

  注意grunt命令和grunt uglify等价。当然也可以带上任务名称default:grunt default能等到同样结果。

6)总结:

  grunt.initConfig:

  为当前项目初始化一个配置对象,其中传入的 configObject 参数可以用在后续的task中,可以通过grunt.config 方法访问。几乎每个项目的 Gruntfile 都会调用此方法。

  注意,任何 <% %> 模板字符串只会在取到配置数据后才被处理。

  不同的插件有各自的参数,比如例子中的uglify插件用到的参数有options和build。详细信息需要参考各个插件。

  initConfig详情参考:http://www.gruntjs.net/api/grunt.config#grunt.config.init

 

  grunt.loadNpmTasks:

  grunt打包主要是用到各种插件,比如上面的压缩用的插件uglify。加载插件需要使用该方法。

  从指定的 Grunt 插件中加载任务。此插件必须通过npm安装到本地,并且是参照 Gruntfile.js 文件的相对路径。

  详情参考:http://www.gruntjs.net/api/grunt.task#grunt.task.loadnpmtasks

 

  grunt.registerTask:

  注册 "别名任务" 或 任务函数。此方法支持以下两种类型:

  别名任务(如果指定了一个任务列表,那么,新注册的任务将会是这一个或多个任务的别名(alias)。当此"别名任务"执行时,taskList中的所有任务都将按指定的顺序依次执行。taskList 参数必须是一个任务数组。):grunt.task.registerTask(taskName, taskList)

  上面的例子就是别名任务。定义一个"default" 任务,当执行 Grunt 且不通过参数指定任务时,第二个参数中的任务将依序执行

  任务函数(如果传入description和taskFunction,每当任务运行时,指定的函数(taskFunction)都会被执行。此外,当执行 grunt --help时,前面指定的描述(description)就会显示出来。特定任务的属性和方法在任务函数内部通过this对象的属性即可访问。如果任务函数返回false表示任务失败。):grunt.task.registerTask(taskName, description, taskFunction)

  下一个例子我们就试一下这个任务函数,现在刚才例子每一个步骤目的就清晰了。

  详情参考:http://www.gruntjs.net/api/grunt.task#grunt.task.registertask

 

2. 使用任务函数方式实现刚才的那个打包。


  其他的东西都没有变,Gruntfile.js变成了

 1 module.exports = function (grunt) {
 2   // 加载提供"uglify"任务的插件
 3   grunt.loadNpmTasks('grunt-contrib-uglify');
 4   // 任务函数
 5   grunt.registerTask('build', 'uglify 使用 任务函数版', function () {
 6     //任务列表
 7     var tasks = ['uglify'];
 8     // 项目配置
 9     grunt.initConfig({
10       pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中
11     });
12     var uglifyTask = {
13       options: {
14         banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
15       },
16       build: {
17         src: 'src/<%=pkg.file %>.js',
18         dest: 'dest/<%= pkg.file %>.min.js'
19       }
20     }
21     //将一个或多个任务放入队列中
22     grunt.task.run(tasks);
23     //给当前项目的 Grunt 配置中的uglify属性设置一个值。
24     grunt.config.set("uglify", uglifyTask);
25   });
26 }

  然后去命令行运行: grunt bulid

  和第一个不同的是运行命令必须带上了任务名称build。

  注意前面提到的任何 <% %> 模板字符串只会在取到配置数据后才被处理。

 

3. 合并压缩


  有些时候为了减少请求需要合并多个文件,且需要压缩。使用uglify即可做到这一点。

  Gruntfile.js代码

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中
 5     uglify: {
 6       options: {
 7         banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',//压缩目标文件头部注释
 8         mangle: false//变量和函数名称不压缩
 9       },
10       my_target: {//该对象名称随意
11         files: {
12           'dest/libs.min.js': ['src/jquery.js', 'src/router.js']
13         }
14       }
15     }
16   });
17   // 加载提供"uglify"任务的插件
18   grunt.loadNpmTasks('grunt-contrib-uglify');
19   // 默认任务
20   grunt.registerTask('default', ['uglify']);
21 }

  文件压缩的顺序按照files中定义的数组的顺序压缩。我们可以通过options.mangle来设置变量和函数名称是否压缩。还可以有下面的用法

1 options: {
2   banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',//压缩目标文件头部注释
3   mangle: {
4     except: ["jQuery"]//不压缩的关键字列表
5   }
6 }

  最终jquery.js和router.js合并压缩成libs.min.js

  详情参考:https://www.npmjs.com/package/grunt-contrib-uglify

 

4. 合并压缩require配置的文件。


  首先需要下载grunt-contrib-requirejs插件:npm install grunt-contrib-requirejs --save-dev

  比如我们的执行文件main.js使用的是require来模块化加载,代码如下

 1 require.config({
 2   baseUrl: "",
 3   paths: {
 4     "jquery": "src/jquery",
 5     "bootstrap": "src/bootstrap.min",
 6     "validator": "src/bootstrapValidator.min"
 7   },
 8   shim: {
 9     "bootstrap":["jquery"],
10     "beyond": ["bootstrap"],
11     "validator": ["bootstrap"]
12   }
13 });
14 requirejs(['validator'], function (v) {
15   //代码
16 });

  我们希望jquery/bootstrap/validator几个文件合并成一个,避免多次请求。

  我们新建一个grunt配置文件gruntCfg.json将main.js的require文件配置代码段拷贝到这个配置文件。并写入输入输出目标。源码如下

 1 {
 2   "requirejs": {
 3     "main": {
 4       "options": {
 5         "baseUrl": "",
 6         "paths": {
 7           "jquery": "src/jquery",
 8           "bootstrap": "src/bootstrap.min",
 9           "validator": "src/bootstrapValidator.min"
10         },
11         "shim": {
12           "bootstrap":["jquery"],
13           "validator": ["bootstrap"]
14         },
15         "include":["validator","jquery","bootstrap"],
16         "out":"dest/libs.js"
17       }
18     }
19   }
20 }

  上面include中我打乱了顺序,为了测试压缩顺序我在三个库的前面都添加了console.log(“我是” + 模块名称)

  修改Gruntfile.js

 1 module.exports = function (grunt) {
 2   grunt.loadNpmTasks('grunt-contrib-requirejs');
 3   //为了介绍自定义任务搞了一个这个
 4   grunt.registerTask('build', 'require', function () {
 5 
 6     //设置requireJs的信息
 7     var taskCfg = grunt.file.readJSON('gruntCfg.json');
 8     var requireTask = taskCfg.requirejs;
 9 
10     //添加人任务列表
11     grunt.task.run(['requirejs']);
12     grunt.config.set("requirejs", requireTask);
13   });
14 }

  好了现在看一下相关文件的文件结构如下

  

  执行build任务:grunt build

  文件夹dest下多了一个libs.js文件

  

  打开来看

  

  第一行代码就有我刚才添加的console。继续找我添加的标志的话发现压缩顺序是:jQuery->bootstrap->bootstrapValidator。和我们的shim依赖顺序一致。说明合并压缩的顺序没有问题。

  更多详情请查看:https://www.npmjs.com/package/grunt-contrib-requirejs

 

5. 多任务


  我们先看一下使用别名任务来执行多个任务的情况,Gruntfile.js源码如下

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中
 5     uglify: {
 6       options: {
 7         banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 8       },
 9       build: {
10         src: 'src/<%=pkg.file %>.js',
11         dest: 'dest/<%= pkg.file %>.min.js'
12       },
13       my_target1: {
14         files: {
15           'dest/libs.min.js': ['src/jquery.js', 'src/router.js']
16         }
17       },
18       my_target2: {
19         files: {
20           'dest/libs.min2.js': ['src/jquery.js', 'src/router.js']
21         }
22       }
23     },
24     requirejs: {
25       "main": {
26         "options": {
27           "baseUrl": "",
28           "paths": {
29             "jquery": "src/jquery",
30             "bootstrap": "src/bootstrap.min",
31             "validator": "src/bootstrapValidator.min"
32           },
33           "shim": {
34             "bootstrap":["jquery"],
35             "validator": ["bootstrap"]
36           },
37           "include":["validator","jquery","bootstrap"],
38           "out":"dest/libs.js"
39         }
40       },
41       "main2": {
42         "options": {
43           "baseUrl": "",
44           "paths": {
45             "jquery": "src/jquery",
46             "bootstrap": "src/bootstrap.min",
47             "validator": "src/bootstrapValidator.min"
48           },
49           "shim": {
50             "bootstrap":["jquery"],
51             "validator": ["bootstrap"]
52           },
53           "include":["validator","jquery","bootstrap"],
54           "out":"dest/libs2.js"
55         }
56       }
57     }
58 
59   });
60   // 加载提供"uglify"任务的插件
61   grunt.loadNpmTasks('grunt-contrib-uglify');
62   grunt.loadNpmTasks('grunt-contrib-requirejs');
63   // 默认任务
64   grunt.registerTask('default', ['uglify',"requirejs"]);
65 }

  执行:grunt

  dest文件夹下多出了5个文件

  

  源码解析是:任务列表有两个任务'uglify'和"requirejs",'uglify'有三个子任务:build/ my_target1/ my_target2, "requirejs"有两个子任务main/main2。最终这五个子任务完成后生成的结果就是dest下多出的5个文件。

 

  还可以使用任务函数方式注册多个任务。Gruntfile.js源码如下

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     log: {
 4       l1: [1,2,3],
 5       l2: 'hello world',
 6       l3: false,
 7       l4: {name: "chua"},
 8       l5: 1,
 9       //这个是不行的l6: undefined,
10       //这个是不行的l7: null
11       l8: function(){alert("test")}
12     }
13   });
14 
15   grunt.registerMultiTask('log','log stuff.', function(){
16       grunt.log.writeln(this.target + ': ' + this.data);
17   });
18 }

  执行:grunt log

  

 

  我们使用自定义方式实现先前的多任务Gruntfile.js源码如下

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中
 5     log: {
 6       uglify: {
 7         options: {
 8           banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 9         },
10         build: {
11           src: 'src/<%=pkg.file %>.js',
12           dest: 'dest/<%= pkg.file %>.min.js'
13         },
14         my_target1: {
15           files: {
16             'dest/libs.min.js': ['src/jquery.js', 'src/router.js']
17           }
18         },
19         my_target2: {
20           files: {
21             'dest/libs.min2.js': ['src/jquery.js', 'src/router.js']
22           }
23         }
24       },
25       requirejs: {
26         "main": {
27           "options": {
28             "baseUrl": "",
29             "paths": {
30               "jquery": "src/jquery",
31               "bootstrap": "src/bootstrap.min",
32               "validator": "src/bootstrapValidator.min"
33             },
34             "shim": {
35               "bootstrap":["jquery"],
36               "validator": ["bootstrap"]
37             },
38             "include":["validator","jquery","bootstrap"],
39             "out":"dest/libs.js"
40           }
41         },
42         "main2": {
43           "options": {
44             "baseUrl": "",
45             "paths": {
46               "jquery": "src/jquery",
47               "bootstrap": "src/bootstrap.min",
48               "validator": "src/bootstrapValidator.min"
49             },
50             "shim": {
51               "bootstrap":["jquery"],
52               "validator": ["bootstrap"]
53             },
54             "include":["validator","jquery","bootstrap"],
55             "out":"dest/libs2.js"
56           }
57         }
58       }
59     }
60   });
61   // 加载提供"uglify"任务的插件
62   grunt.loadNpmTasks('grunt-contrib-uglify');
63   grunt.loadNpmTasks('grunt-contrib-requirejs');
64   
65   grunt.registerMultiTask('log','log stuff.', function(){
66     if(this.target == "uglify"){
67       //添加人任务列表
68       grunt.task.run(['uglify']);
69       grunt.config.set("uglify", this.data);
70     }else if(this.target == "requirejs"){
71       //添加人任务列表
72       grunt.task.run(['requirejs']);
73       grunt.config.set("requirejs", this.data);
74     }
75   });
76 }

  执行:grunt log

  照样得到先前的结果

  

  说到底和先前的别名任务没有什么不同。

 

6. 压缩整个文件夹下的js文件


  压缩src下的所有js文件,Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     uglify: {
 4       my_target: {
 5         files: [{
 6           expand: true,
 7           cwd: 'src',
 8           src: '**/*.js',
 9           dest: 'dest'
10         }]
11       }
12     }
13   });
14   grunt.loadNpmTasks('grunt-contrib-uglify');
15   grunt.registerTask('default', ['uglify']);
16 }

  源码文件结构(注意src/router下面还有一个js文件)

  

  执行:grunt

  目标文件结构

  

  所以这个方法还是比较方便的,他会遍历源文件夹下的所有文件(包括子文件夹)然后压缩。

 

  刚才上面的方式没有拷贝src文件夹,下面这种方式拷贝了src文件夹

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     uglify: {
 4       my_target: {
 5         files: [{
 6           expand: true,
 7           //cwd: 'src',
 8           src: 'src/**/*.js',
 9           dest: 'dest'
10         }]
11       }
12     }
13   });
14   grunt.loadNpmTasks('grunt-contrib-uglify');
15   grunt.registerTask('default', ['uglify']);
16 }

  执行:grunt

  目标文件结构变成

  

  src下所有的js都被压缩并保持原来的目录结构。

 

7. grunt-contrib-requirejs插件的更详细使用


  我们用实例来说明。现在我们的文件结构是这样子的

  

  main.js是我们使用require的真实配置文件,源码如下

 1 require.config({
 2   baseUrl: "",
 3   paths: {
 4     "jquery": "src/jquery",
 5     "bootstrap": "src/bootstrap.min",
 6     "validator": "src/bootstrapValidator.min"
 7   },
 8   shim: {
 9     "bootstrap":["jquery"],
10     "beyond": ["bootstrap"],
11     "validator": ["bootstrap"]
12   }
13 });
14 requirejs(['validator'], function (v) {
15   //代码
16 });

  Gruntfile.js的源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     "requirejs": {
 4       "main": {
 5         "options": {
 6           "baseUrl": ".",
 7           "mainConfigFile": "main.js",//指定配置文件
 8           "name": "test",//会将对应的文件压缩到main.js依赖的文件的前面压缩。但是会在main.js非依赖文件后面压缩(比如router.js)
 9           "include":["jquery","bootstrap","validator","src/router/router.js"],//要压缩在一起的文件(会包括name对应的文件)
10           "out":"dest/libs.js"
11         }
12       }
13     }
14   });
15   grunt.loadNpmTasks('grunt-contrib-requirejs');
16   grunt.registerTask('default', ['requirejs']);
17 }

  需要说明的是name指定的文件内容会在main.js配置的依赖文件压缩之前压缩,但是如果include中还包含其他非main.js依赖的文件,则会在main.js非依赖文件后面压缩。

  我们的test.js源码为

1 console.log("这是我随便测试用的一个js");

  然后我们执行:grunt

  结果在dest下生成一个libs.js压缩文件

  

  并且这个文件里面包含的压缩文件的顺序是:router.js->test.js->jquery.js-> bootstrap.min.js-> bootstrapValidator.min.js。

  所以说配置include中文件会依序压缩到libs.js,但是main.js依赖的文件会放在最后(依赖会逐层往上查找依赖),而name指定的文件会在非依赖文件之后依赖文件之前压缩。

 

  require模板文件打包

  模板文件使用到require工程上的text.js文件,路径:http://github.com/requirejs/text

  我们这里建立一个模板文件test.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>test</title>
5 </head>
6 <body>
7 </body>
8 </html>

  实际上现在test.html没有用到任何模板相关的运用,我们只是做打包例子,所以不管其他,我们只需要知道模板文件一般是html文件即可

  现在工程的文件结构是

  

  Gruntfile.js的源码为

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     "requirejs": {
 4       "main": {
 5         "options": {
 6           baseUrl: ".",
 7           paths: {
 8             "jquery": "src/jquery",
 9             "bootstrap": "src/bootstrap.min",
10             "validator": "src/bootstrapValidator.min",
11             "text": "text"//引入requirejs项目下解析模板引擎
12           },
13           shim: {
14             "bootstrap":["jquery"],
15             "beyond": ["bootstrap"],
16             "validator": ["bootstrap"]
17           },
18           "include":["jquery","bootstrap","validator","text!test.html"],          "out":"dest/libs.js"
19         }
20       }
21     }
22   });
23   grunt.loadNpmTasks('grunt-contrib-requirejs');
24   grunt.registerTask('default', ['requirejs']);
25 }

  执行命令行:grunt

  dest文件下多了一个libs.js,查看其中是否有模板文件test.html中的内容

  

  说明模板被一同压缩进去了。关键是"text!test.html"这句话。test会将模板test.html解析成js脚本形式。

 

8.  cssmin打包样式文件


  需要用npm下载cssmin插件:npm install grunt-contrib-cssmin --save-dev

  Gruntfile.js文件源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     cssmin: {
 4       compress: {
 5         files: {
 6           'dest/t.min.css': ["src/t1.css","src/t2.css"]
 7         }
 8       }
 9     }
10   });
11 
12   grunt.loadNpmTasks('grunt-contrib-cssmin');
13 
14 }

  命令行执行:grunt cssmin

  两个css文件压缩打包到dest/t.min.css

 

9. htmlmin打包html文件


  需要用npm下载cssmin插件:npm install grunt-contrib-htmlmin --save-dev

  Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     htmlmin: {
 4       main: {
 5         options:{
 6           removeComments: true,
 7           collapseWhitespace: true
 8         },
 9         files:{
10           "dest/test.html": "test.html"
11         }
12       }
13     }
14   });
15 
16   grunt.loadNpmTasks('grunt-contrib-htmlmin');
17   grunt.registerTask("default",["htmlmin"]);
18 }

  执行命令:grunt

  test.html压缩到dest/test.html

  

10. copy拷贝文件


  需要下载copy插件npm install grunt-contrib-copy --save-dev

  将src文件夹(包括内容和子文件内容)拷贝到dest目录下,Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     copy: {
 4       main: {
 5         expand: true,
 6         src: 'src/**',
 7         dest: 'dest/'
 8       }
 9     }
10   });
11 
12   grunt.loadNpmTasks('grunt-contrib-copy');
13   grunt.registerTask("default",["copy"]);
14 }

  运行:grunt

  src被完美的拷贝到dest下

   

 

  只拷贝src的第一层子文件,Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     copy: {
 4       main: {
 5         expand: true,
 6         src: 'src/*',
 7         dest: 'dest/'
 8       }
 9     }
10   });
11 
12   grunt.loadNpmTasks('grunt-contrib-copy');
13   grunt.registerTask("default",["copy"]);
14 }

  运行结果

  

  这个时候router是空文件夹。

  所以这里我们需要明白路径中“*”只表示当前这一层,“**”表示需要递归子文件夹   

 

  如果只是拷贝src中的内容而不用src包裹则需要cwd属性

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     copy: {
 4       main: {
 5         expand: true,
 6         cwd: "src/",
 7         src: '*',//也可以是数组形式["*"],可以过滤多种类型
 8         dest: 'dest/'
 9       }
10     }
11   });
12 
13   grunt.loadNpmTasks('grunt-contrib-copy');
14   grunt.registerTask("default",["copy"]);
15 }

  执行结果是

  

  注意下面这种写法会报错

module.exports = function (grunt) {
  grunt.initConfig({ 
    copy: {
      main: {
        expand: true,
        cwd: "src",
        src: '/*',//会报错,不能以/开头,会被认为是绝对路径
        dest: 'dest/'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.registerTask("default",["copy"]);
}

 

  拷贝src文件夹下指定类型的文件,Gruntfile.js源码

module.exports = function (grunt) {
  grunt.initConfig({ 
    copy: {
      main: {
        expand: true,
        src: 'src/*.js',
        dest: 'dest/'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.registerTask("default",["copy"]);
}

  执行:grunt

  结果src的js文件随src文件夹被拷贝

  

 

  递归拷贝src文件夹下所有子文件夹中的js文件

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     copy: {
 4       main: {
 5         expand: true,
 6         src: 'src/**/*.js',
 7         dest: 'dest/'
 8       }
 9     }
10   });
11 
12   grunt.loadNpmTasks('grunt-contrib-copy');
13   grunt.registerTask("default",["copy"]);
14 }

  执行结果

  

 

  将所有指定类型的文件提取到同一层,Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   grunt.initConfig({ 
 3     copy: {
 4       main: {
 5         flatten: true,//所有文件提取到dest下
 6         expand: true,
 7         src: 'src/**/**.js',
 8         dest: 'dest/'
 9       }
10     }
11   });
12 
13   grunt.loadNpmTasks('grunt-contrib-copy');
14   grunt.registerTask("default",["copy"]);
15 }

  执行结果

  

  我们发现router/router.js被提取到了目标目录下,这也是flatten的作用

 

11. 使用contrib-watch和newer实时监听文件更改


  这里需要用到两个插件,下载这两个插件

  grunt-contrib-watch —— 作用是实现我们一开始需求的“自动化”!它会监听需要处理的文件的变动,一旦有变动就会自动执行相应处理。但是它有一个问题,就是每当监听到一处变动时,就会大费周章地把所有被监听的文件都处理一遍;

  grunt-newer —— 作用是处理上方watch的毛病,让watch在监听到某个文件变动时,仅仅对变动的文件进行事务处理。

  我们以合并压缩为例,Gruntfile.js源码

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     uglify: {
 5       my_target: {//该对象名称随意
 6         files: {
 7           'dest/libs.min.js': ['src/jquery.js', 'src/router.js']
 8         }
 9       }
10     },
11     watch: {
12       watchJs: {
13         files: ["src/**/*.js"],
14         tasks: ["newer:uglify"]//一旦监听到files中文件修改,立马触发uglify任务
15       }
16     }
17   });
18   // 加载提供"uglify"任务的插件
19   grunt.loadNpmTasks('grunt-contrib-uglify');
20   grunt.loadNpmTasks('grunt-contrib-watch');
21   grunt.loadNpmTasks('grunt-newer');
22   // 默认任务
23   grunt.registerTask('default', ['uglify',"watch"]);
24 }

  上面watch任务有一个子任务watchJs监听js的变动,一旦监听到files更改就触发uglify任务。

  

12. 使用autoprefixer自动为CSS规则添加最合适的前缀兼容浏览器


  Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。

  需要下载grunt-autoprefixer插件

  Gruntfile.js源码实例

 1 module.exports = function (grunt) {
 2   // 项目配置
 3   grunt.initConfig({
 4     autoprefixer : {
 5       my_target: {//该对象名称随意
 6         expand:true,
 7         src: "src/**/*.css",
 8         dest: "dest/"
 9       }
10     },
11     watch: {
12       watchJs: {
13         files: ["src/**/*.css"],
14         tasks: ["newer:autoprefixer"]//一旦监听到files中文件修改,立马触发任务
15       }
16     }
17   });
18   // 加载提供"uglify"任务的插件
19   grunt.loadNpmTasks('grunt-autoprefixer');
20   grunt.loadNpmTasks('grunt-contrib-watch');
21   grunt.loadNpmTasks('grunt-newer');
22   // 默认任务
23   grunt.registerTask('default', ['newer:autoprefixer',"watch"]);
24 }

  这样监听了所有css更改,每次更改都会先添加浏览器兼容前缀。我们可以放心的在样式文件中按照最新的W3C规范来正常书写CSS而不需要浏览器前缀。

 

 

13. 总结


  总的来说grunt压缩打包都是基于插件,各种插件的作用可以查看官网文档。

  在运行任务函数指定的任务的时候可以通过冒号分割来传递参数。比如下面的例子

module.exports = function (grunt) {
  //为了介绍自定义任务搞了一个这个
  grunt.registerTask('test', '任务函数实例', function (arg1, arg2) {
    if (arguments.length === 0) {
      grunt.log.writeln(this.name + " 没有参数");
    } else {
      var join = Array.prototype.join;
      grunt.log.writeln(this.name + " 的参数有" + join.call(arguments,","));
    }
  });
}

  执行:grunt test

  打印:

Runing “test” task
test 没有参数

  执行:grunt test:1

  打印:

Runing “test:1” (test) task
test 的参数有1

  执行:grunt test:1:2

  打印:

Runing “test:1:2” (test) task
test 的参数有1,2

  正常来说我们的html/css/js文件都是用不同的文件夹保存的,所以我们可以分成三种任务来处理。这些任务都可以配置在一起,最后一次性打包,这部分根据各自实际项目情况来处理。

  ok,如果你从头到尾看完并把上面的实例执行,那么grunt的基本功能就没有问题了。更多的需要看具体的插件使用了。

  

  码字不容易,求推荐。

 

posted @ 2016-04-12 16:23  chua1989  阅读(5344)  评论(5编辑  收藏