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

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

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

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

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

五. 配置Gruntfile.js

module.exports = function( grunt )
{
grunt.initConfig( {
/* 任务配置，所有插件的配置信息 */

pkg: grunt.file.readJSON( "package.json" )
} );
//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）

grunt.registerTask( 'default', [] );
};

六. Grunt插件安装和配置

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

/*======= 压缩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']
}
}
},

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

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

//告诉grunt当我们在终端中输入grunt时需要做些什么
grunt.registerTask( 'default', [], function()
{
//告诉grunt我们将使用插件

grunt.loadNpmTasks( 'grunt-contrib-uglify' );
//需要执行哪些任务（注意先后顺序）

grunt.task.run(
'newer:uglify'

);
} );

/*=======
压缩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指定的目录中

}
},

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

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

九. 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 监听， 如下图：

十. 批量安装插件

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

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

2用此方法，批量安装。

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

十. 完结