Grunt-自动化构建工具

一般而言,我会把项目代码分成两份,这两份代码内容是相同的,一份用于本地开发或者修改,另一份放在svn。在svn上的代码是与开发的工程并存的,我们前端只需要把本地开发好的文件提交到svn,开发再将svn的文件同步到服务器。在提交的过程中,我们需要做如下处理:

首先,js压缩工具压缩js

其次,css压缩工具压缩css

然后,合并多个js和css

最后,压缩和优化图片,进行覆盖

对于多个文件还需要重复以上操作…

如果我说上述工作只需要一两行命令就能完成,你相信吗?或许你不信,但却真的可以做到,是的,那就是grunt,它可以帮助我们完成自动化构建工程。具体如何使用呢?请看下文:

第一步:

因为grunt是基于nodejs环境运行的,所以需要先下载nodejs,进入http://nodejs.org/download/ 选择对应系统的nodejs安装包,然后打开命令编辑器(cmd),输入:

npm install -g grunt-cli

安装完成之后,你会看到这么个界面:

grunt01

你也可以输入这么一行代码,测试是否安装成功:

grunt -versions

如果安装成功,则可以看到grunt的版本号,如下界面:

grunt02

如果之前安装过grunt,你需要卸载它,则可以输入:

npm uninstall -g grunt

第二步:

在安装node的根目录新建一个文件,文件名为package.json。打开package.json,加入如下代码,这些代码是官网给出的

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

好了,现在开始我们的第一个任务,压缩js文件,既然要有压缩js文件的功能,就必须安装相应的插件,于是我们来到官网需找插件。

第三步:

打开官网 http://gruntjs.com/plugins,找到相应的压缩js的插件

grunt03

进入到相应页面:https://www.npmjs.com/package/grunt-contrib-uglify

插件的版本号可以在这个页面右侧栏看到,其中右侧栏还包含了发布作者的信息、github地址以及相关证书。增加完之后,我们回到命令编辑器,输入对应的工程目录。假设我的node目录为:F:\node , 项目路径为:F:\test。

因为我们在命令编辑器中操作的是grunt,所以需要找到对应的路径,在命令编辑器中:

先输入 f:

回车,输入 cd node

回车,再输入

npm install runt-contrib-uglify

插件安装完成后,我们就会看到这样一个界面:

grunt04

在命令编辑器可以看到插件的信息(版本号0.7.0),于此同时,你也会发现在node_modules文件夹下多了grunt-contrib-uglify插件的文件。

然后我们需要在package.json这个配置文件里面增加相应插件的代码:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.7.0" // 新增代码  “插件名称” : “~版本号” 
  }
}

第四步:

然后再在node根目录新建Gruntfile.js,这个js文件的功能是将工程中需要处理的文件与package.json结合起来,并且通过控制对应的插件去设置需要处理的文件,以及处理后的文件目录或输出文件名,Gruntfile.js的基本代码如下:

module.exports = function(grunt) {
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'), // 将js与json文件关联在一起
      uglify : {
        options :{  // 可选
            separates : ""
        },
        min: {
            expand : true,
            cwd    : '../test',
            src    : ['*/*.js'],
            dest   : '../test',
            ext    : '.min.js'
        }
      }
    });
 
    // 从node目录加载压缩js文件的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
 
    // 执行对应的grunt任务
    grunt.registerTask('default', ['uglify:min']);
};

以上代码的功能是将test文件下所有目录中的js文件全部压缩。

例如test文件下有一个a文件夹,a中有base.js 。则上面的代码在执行完grunt命令后会在a中增加一个base.min.js,这个文件就是a.js的压缩版。

如果你只是想把对应的文件压缩,不想新增.min.js文件。可把ext的值设为:’.js’ 。

uglify 中的 options 是可选的。在合并多个js文件时非常有用,为什么呢?请看下面的问题:

我在测试合并插件(grunt-contrib-concat)的时候,由于js文件中存在末尾没有加分号的语句,那么就会出现以下问题。假设合并的文件分别为a.js 和 b.js:

a.js 中:

var getStyle = function(ele,attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,false)[attr];
}

b.js 中:

(function(){})()

那么,当合并完成,b.js里的自调用匿名函数的第一对括号会当做函数调用,此时就会导致错误。这也是为什么有些人会在写自调用匿名函数时,会在前后都加上分号,目的就是为了防止以上错误。

而在grunt中,我们便可以把separates 的值设为 ‘;’ 用于链接各个js文件。这样也能避免js错误。

设置参数解释:

expand : 为true时,用*代替的文件名处理完输出后也为其具体名
cwd : 需要处理文件的共同目录,或者说根目录(父目录)
src : 需要处理的单独文件 ,即对于的子目录。它的值为一个数组
dest : 处理完文件的存放目录
ext : 处理完文件的后缀名

第五步:

最后,我们需要执行grunt命令。回到命令编辑器,输入:grunt

当grunt命令执行完后,会看到这么一个界面:

grunt05

这样,我们就完成了js文件压缩。打开每个文件夹,都可看到新生成且后缀名为 .min.js 的文件。

如果你还想要用grunt合并css文件、压缩图片或者其他功能,可以重复第三、四、五步骤。

倘若你不想每次在新增插件的时候,都像下面这样手动添加载入插件的代码:

grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载js压缩插件
grunt.loadNpmTasks('grunt-contrib-cssmin'); // 加载css压缩插件
grunt.loadNpmTasks('grunt-contrib-concat') ; // 加载文件合并插件

那么你可以安装 load-grunt-tasks插件,然后在Gruntfile.js加入以下代码,它的功能与上面代码等价。

// 加载在package.json声明的全部插件
require('load-grunt-tasks')(grunt);

目前我用到的主要有以下几个插件:

grunt-contrib-uglify
压缩js文件,上文有介绍。

grunt-contrib-cssmin
压缩css文件,用法与压缩js的插件类似。

grunt-contrib-concat
合并多个文件,Gruntfile中只需要设置src和des,即:

concat   : {
    options :{  // 可选
        separates : ""
    },
    css : {
        src    : ['../test/a/*.css','../test/b/*.css'],
        dest   : '../test/all.css'
    }
}

grunt-contrib-imagemin
压缩图片,这个插件会对指定文件里的图片进行压缩,你不能设置输出的名称,因为它是直接对图片本身进行压缩。对于不同格式的图片,只需要把src的值图片的后缀名变为 .{jpg,png,gif} 即可。

关于grunt的内容就暂时介绍这么多,如果你想了解更多,请访问它的官网 http://gruntjs.com。

评论功能已关闭。