前端必看 grunt搭建自动化的web前端开发环境

本文章是关于搭建和安装grunt前端。言简意赅分为以下几步，按步骤操作可搭建一个简单的前端框架。以后再开发前端的时候，可以再根据实际项目需求，逐渐完善和增加相关插件和环境，这里就不多做论述了。本随笔若有错误之处欢迎指正，也欢迎各位同行一起交流成长。

一.安装nodejs

下载地址：https://nodejs.org/en/

在下载nodejs时候，应注意：1.最新版本的尽量别用，2.奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。

本例子，nodejs的版本为：node-v4.4.5-x64

安装时，点击下一步到底即可。

安装完成后，在制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。

二.安装grunt-CLI

“CLI”：翻译为“命令行”。

在控制台输入：

1.windows系统：

npm install -g grunt-cli

2.mac os 系统、部分linux系统：

                                                     sudu npm install -g grunt-cli

验证一下grunt-cli是否安装完成并生效，在命令行中输入“grunt”命令即可。生效则会出现以下结果：

三.搭建一个项目

新建一个“template”的文件夹，在里面创建dist和src的文件夹，src为项目内容，dist为压缩合并转译等处理过后的文件夹，在src里面建立css，js文件夹，里面对应放入相应的文件夹和文件。

在根目录创建一个package.json文件。

在里面写入如下代码：

{  "name": "template",  "version": "1.0.0",  "devDependencies": {  }}

最后一个“devDependencies”为“开发依赖项”，即我们现在这个系统，将会依赖于哪些工具来开发，目前为空对象，在之后的操作中，随着安装的进行，会逐渐填充起来的。

四. 安装grunt

以上的几步，安装grunt-CLI都是在全局安装的，这里我们要安装grunt 则是在项目文件下安装的，这里我们要在控制台中跳转到项目文件目录下，这里我的项目文件的地址为 D:\template，在控制台输入d：再输入 cd template 。。

然后再项目文件目录下输入：

npm install grunt --save-dev

“—save-dev”的意思是，在当前目录安装 grunt 的同时，顺便把 grunt 保存为这个目录的开发依赖项。由于grunt仅在开发阶段使用，所以使用--save-dev。如果是运行时使用的，则用--save。

上文配置package.json时，其“devDependencies”的“devDependencies”中就会存储开发依赖项。

在输入npm install grunt --save-dev后：

并且，在项目文件下，多了一个“node_modules”文件夹。

在控制台运行“grunt”命令。如果得到一个warning提示，那说明grunt已经起作用了。

五. 配置Gruntfile.js

在根目录建立Gruntfile.js，里面输入如下代码：

module.exports = function( grunt ){   grunt.initConfig( {      /* 任务配置，所有插件的配置信息 */      pkg: grunt.file.readJSON( "package.json" )   } );   //告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）   grunt.registerTask( 'default', [] );};

再运行一下grunt命令，如下图，说明正确。

六. Grunt插件安装和配置

grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，上面有足够多的插件，这里就简单介绍几个常用的插件。

插件安装命令如下：

npm install grunt-contrib-jshint --save-dev      --javascript语法错误检查；     

npm install grunt-contrib-csslint --save-dev    --css语法错误检查；                            

npm install grunt-contrib-uglify --save-dev      --压缩，合并javascript代码；                          

npm install grunt-contrib-cssmin --save-dev    --压缩，合并css代码；                                                         

npm install grunt-contrib-less --save-dev         --把less转换成css;                                                                          

npm install grunt-contrib-concat --save-dev     --合并多个文件的代码到一个文件中；                                      

npm install grunt-contrib-watch --save-dev      --实时监控文件变化、调用相应的任务重新执行;    

npm install grunt-contrib-newer --save-dev      --文件更改后，增量更新，而不是对所有的文件去执行任务;          

npm install grunt-contrib-copy --save-dev        --复制文件、文件夹;                                                          

npm install grunt-contrib-clean --save-dev       --清空文件、文件夹;                                         

七. uglify插件安装（压缩javescript代码）

控制台中，在项目目录下输入： npm install grunt-contrib-uglify --save-dev

在项目文件喜爱src  js 中建立一个text.js，输入如下代码，作为测试js文件。

1、打开gruntfile.js，在grunt.initConfig方法中配置 uglify 的配置参数。如下图：

/*======= 压缩js，uglify插件的配置信息 =======*/uglify: {   options: {      //在所有生成的文件上方加上 时间      banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'   },   minjs: {      files: [ {         expand: true,     // 启用下面的选项         cwd: 'src/js/',       // 指定待压缩的文件路径         src: [ '**/*.js', '!**/*.min.js' ], // 匹配相对于cwd目录下的所有js文件(排除.min.js文件)         dest: 'dist/js',   // 生成的压缩文件存放的路径         ext: '.min.js'    // 生成的文件都使用.min.css替换原有扩展名，生成文件存放于dest指定的目录中      } ]   },   /*  合并js  */   merge: {      files: {         /* 合并指定目录下   所有的js文件 */         'dist/js/merge/all/all.js': [ 'dist/js/**/*.js'],     //前者为合并的路径，后者为对象路径         /* 合并指定目录下   特定的js文件 */         'dist/js/merge/some/some.js': [ 'dist/js/jquery/*.js']      }   }},

2、在 grunt.initConfig 方法之后，要让grunt去加载这一个插件,如下：

//告诉grunt我们将使用插件grunt.loadNpmTasks( 'grunt-contrib-uglify' );

3、在grunt命令执行时，要不要立即执行uglify插件？如果要，就写上，否则不写。

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）grunt.registerTask( 'default', [ 'uglify'] );

当然了，也可以这么写，简化一点：

//告诉grunt当我们在终端中输入grunt时需要做些什么grunt.registerTask( 'default', [], function(){   //告诉grunt我们将使用插件   grunt.loadNpmTasks( 'grunt-contrib-uglify' );      //需要执行哪些任务（注意先后顺序）   grunt.task.run(      'newer:uglify'   );} );

至此前期工作都做好了，可以在控制台输入命令运行了，在控制台输入grunt

成功，如下图：

八. cssmin插件安装（压缩css代码）

控制台中，在项目目录下输入： npm install grunt-contrib-cssmin --save-dev

1、打开gruntfile.js，在grunt.initConfig方法中配置 cssmin 的配置参数。如下图：

/*=======  压缩css，cssmin插件的配置信息 =======*/cssmin: {   /*压缩 CSS 文件为 .min.css */   options: {      keepSpecialComments: 0 /* 移除 CSS 文件中的所有注释 */   },   /*  合并CSS  */   merge:{      files:{         /* 合并指定目录下   所有的CSS文件 */         'src/css/merge/all/all.css':[ 'src/css/**/*.css', '!src/css/**/*.min.css'],         /* 合并指定目录下   特定的CSS文件 */         'src/css/merge/some/some.css':['src/css/bootstrap/*.css', 'src/css/some.css', '!src/css/**/*.min.css']      }   },   minify: {      expand: true,                      // 启用下面的选项      cwd: 'src/css/',                   // 指定待压缩的文件路径      src: [ '**/*.css', '!**/*.min.css' ],     // 匹配相对于cwd目录下的所有css文件(排除.min.css文件)      dest: 'dist/css',               // 生成的压缩文件存放的路径      ext: '.min.css'                        // 生成的文件都使用.min.css替换原有扩展名，生成文件存放于dest指定的目录中   }},

2、在 grunt.initConfig 方法之后，要让grunt去加载这一个插件,如下：

//告诉grunt我们将使用插件grunt.loadNpmTasks( 'grunt-contrib-cssmin' );grunt.loadNpmTasks( 'grunt-contrib-uglify' );

3、在 grunt.initConfig 方法之后，要让grunt去加载这一个插件,如下：

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）grunt.registerTask( 'default', ['cssmin','uglify'] );

至此前期工作都做好了，可以在控制台输入命令运行了，在控制台输入grunt

成功，如下图：

九. watch插件安装和配置

控制台中，在项目目录下输入：        npm install grunt-contrib-watch --save-dev

这里我们要注意下，一般 watch 最好要配合 newer 插件使用，因为 watch 监听相关文件变化而调用相应的插件执行，一般项目文件是非常庞大的，零零碎碎不少文件，可谓动一发而牵全身，每次文件改动，就执行watch，就要运行个几秒钟，若是电脑不好，内存2G甚至2G以下，则有可能出现几十秒的时间，故而这里我们要安装newer插件，文件更改后，增量更新，而不是对所有的文件去执行任务。

1、打开gruntfile.js，在grunt.initConfig方法中配置 watch 的配置参数。如下图：

/*======= 监控文件变化并执行相应任务 =======*/watch: {   /*  监听当Gruntfile.js改变时，重新刷新加载  */   configFiles: {      files: [ 'Gruntfile.js'],      options: {         reload: true      }   },   less: {      files: [ 'src/css/less/*.less' ],   //监听的对象路径      tasks: [ 'newer:less' ],           //执行的事件      options: {         spawn: false,         debounceDelay:5000             //每次监听的间隔时间      }   },   css: {      files: [ 'src/css/**/*.css' ],      tasks: [ 'newer:cssmin' ],      options: {         spawn: false,         debounceDelay:5000      }   },   js: {      files: [ 'src/js/**/*.js' ],      tasks: [ 'newer:uglify' ],      options: {         spawn: false,         debounceDelay:5000      }   }}

这里注意一下，这块内容：

/*  监听当Gruntfile.js改变时，重新刷新加载  */   configFiles: {      files: [ 'Gruntfile.js'],      options: {         reload: true      }   },

这表示，当 gruntfile.js 配置文件发生变化的时候，watch 也可以监听到，并根据更改内容，改变并且执行相关事件。

2、在 grunt.initConfig 方法之后，要让grunt去加载这一个插件,如下：

//告诉grunt我们将使用插件grunt.loadNpmTasks( 'grunt-contrib-cssmin' );grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-newer' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );

3、在 grunt.initConfig 方法之后，要让grunt去加载这一个插件,如下：

//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）grunt.registerTask( 'default', ['cssmin','uglify'，watch’] );

在控制台输入命令运行了，在控制台输入grunt，可以开启 watch 监听，如下图：

这里我们可以看到，在执行grunt时，按照gruntfile.js里面相关任务的顺序，依次执行一遍，最后我们看到running 'watch' task wating,说明watch已经启用，正在监听。

这里我们随便改动一下一个js文件里面的内容，则会出现：

监听对象一有改变，就能执行绑定事件，十分方便。

十. 批量安装插件

在开发时候，如我本地搭建了前端的环境，其他同事没有，不可能也不会把“node_modules”上传到开发库，其他一起开发的人，为了得到这些grunt插件和工具，有2种方法：

1手动一个一个安装，这是一个笨方法，其次如果我当年安装的旧版本，而他们现在自己安装的可能是新版本。新旧有可能不兼容。

2用此方法，批量安装。

我们在把项目文件上传服务器时，肯定会把根目录的package.json上传上去，而package.jso 的“devDependencies”就记录了这个系统的开发依赖项，我们可以通过nodejs的npm即可批量安装。

下面我们测试一下，在d盘中新建一个' template2 '文件，然后把“grunt_test”中的package.json拷过去。在打开命令行跳转到“temple2” ，执行

npm install

看看得到什么结果。

整个过程相当于把所有插件下载了一遍，然后发现在项目文件中生成了node_modules文件。且安装的版本和原版本都是一致的。

之后，只需把Gruntfile.js复制到项目文件下，根据项目要求做相应的改动即可。

十. 完结

本次操作只举例了几个插件的安装，类似的jshint，csslint，以及concat就不做讨论了，jshint配合watch可实时检查js代码的错误之处，十分强大，至于concat，则是合并js和css文件，应为cssmin和uglify已经包含此功能，所以也就不需要了，其他还有许多插件，可以自行百度安装，大同小异。

个人认为，平时状态下，jshint和cssmin插件安装好，配置文件代码可以先注释掉，因为每次watch监听，可能会报一大堆错误，影响心情和效率，如果想实时更改可以开启，我的建议是，要找错，要测试再开启。

目前前端glup自动化构建工具也不错，和grunt相比各有千秋，后续也会写一些glup的内容，再补上其他一些插件供给参考。