前面两篇文章Grunt打造前端自动化工作流(一):Grunt安装Grunt打造前端自动化工作流(二):常见插件的功能及参数介绍介绍了具体使用Grunt之前的基础知识。今天我们就来学习在一个项目中如何使用Grunt以及使用过程需要注意的地方。

我们按照第一篇文章介绍的,新建一个项目文件夹project,文件夹中有两个文件Gruntfile.js和package.json。新建一些文件,最后的目录结构如下:目录中node_modules文件夹是安装grunt产生的,其中已经有了grunt文件夹。js文件夹中有a.js和b.js,两个JS文件夹中都随便写点JS。其余均为空。

现在我实际演示如何使用grunt-contrib-uglify插件。

安装uglify插件,注意:一定要在该项目文件夹下安装,每一个项目的Grunt以及插件都是分开的。在命令行下进入project,输入npm install grunt-contrib-uglify --save-dev,安装好了之后,就会看到node_module文件夹下多了一个grunt-contrib-uglify文件夹。而且package.json文件夹里也写好了devDependencies:

      "devDependencies":{
                 "grunt":"^0.4.5",
                  "grunt-contrib-uglify":"^0.9.1"
       }

目前Gruntfile.js里文件内容如下:

         module.exports = function(grunt){
                  grunt.initConfig({

                   });
         }

现在我们加入grunt-contrib-uglify插件的使用代码:

ok,在命令行下输入grunt,提示:

然后在build/js目录下会多了a.min.js和b.min.js
代码解释:

  1. 代码中line3-line13部分是uglify插件的配置信息,line15部分是加载uglify插件的语句,line16部分是注册任务的语句。
  2. line3的命名uglify是不能变的,是因为这个插件需要一个同名的配置参数。很多插件都是这样的比如:imagemin,cssmin等
  3. line4的命名build是随意的。不过最好遵循语义化。
  4. line5-line10是很多插件都有的配置参数(如下)
  5. line15是用来加载相应插件的。
  6. line16是用来定义任务的,在上面的例子中,将uglify任务定义为默认任务,这时候输入grunt或者grunt default 都是一样的。也可以将任务定义为其他的名字,比如('live','watch'),这时候要运行watch任务,就要输入grunt live了。

具体的参数含义如下:

  • expand: 如果设为true,就表示文件名的占位符(*) 都要扩展成具体的文件名。
  • cwd : 需要处理的文件所在的目录
  • src : 需要处理的文件,如果为数组形式,数组的每一项就是一个文件名,可以使用通配符
  • dest : 处理后的文件名或所在目录
  • ext : 处理后的文件名后缀名

一条命令行语句就能完成整个压缩功能,方不方便?这还只是一个最基本的插件,如果结合其他的插件(比如watch),将极大的提升前端开发的效率!!!

可能你注意到了,这个基本例子和Grunt官网的案例有比较大的不同,这是因为刚开始学的时候,我希望能先把一个最简单的例子剥离出来,好让大家理解Grunt的基本原理,然后再慢慢添加更多参数、语句之类的。

pkg

官网的案例中有这么一条语句:pgk:grunt.file.readJSON('package.JSON'),这条语句的作用是将package.JSON中的JSON数据存入到pkg对象中。这样就可以使用<% %>模板字符串来引用JSON的配置属性了。

options

options属性分为任务级和目标级,任务级options将影响任务下所有目标,目标级options将只影响具体的目标,目标级options将覆盖任务级options。

line18-line20是任务级options,line13-line16是目标级options.

系列文章

Grunt打造前端自动化工作流(一):Grunt安装

Grunt打造前端自动化工作流(二):常见插件的功能及参数介绍