本文章是关于搭建和安装grunt前端。言简意赅分为以下几步，按步骤操作可搭建一个简单的前端框架。以后再开发前端的时候，可以再根据实际项目需求，逐渐完善和增加相关插件和环境，这里就不多做论述了。本随笔若有错误之处欢迎指正，也欢迎各位同行一起交流成长。
一.安装nodejs
在下载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插件安装和配置
插件安装命令如下：
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' );
//告诉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' );
//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序） grunt.registerTask( 'default', ['cssmin','uglify'，watch’] );
在控制台输入命令运行了，在控制台输入grunt，可以开启 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的内容，再补上其他一些插件供给参考。
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
