grunt接触

grunt使用#

以下内容均为已经安装好grunt，具体grunt的安装过程不述，可以参考grunt的相关资料。

1.项目初始化grunt##

在项目文件夹的根目录下面，打开命令行grunt init，执行初始化grunt，根据命令窗口中的提示，输入相关的项目信息，完成之后会在根目录下面生成一个package.json文件。

当然，如果你之前有用过grunt，那么之前的package.json文件可以直接复制过来。同样grunt网站上的package.json默认文件也可以拿过来用。

2.安装grunt及相关插件##

在上述的命令窗口中继续操作。在完成初始化之后，便是安装当前项目的grunt了，都知道grunt是模块化的结构，不同的功能插件在不同的项目中可能有的用到有的不用到，所以grunt采用的是局部安装。

npm insall会完成package.json文件中配置的相关插件的安装。

如果后来发现还需要安装一些其他的插件，npm install <module> --save-dev命令便能完成相应module的安装。其中--save-dev是实现安装完插件之后，将他们保存到package.json文件中去。

以下是示例：

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

对应的这样的安装之后的package.json文件如下：

{
    "name": "my-project-name",
    "version": "0.1.0",
    "author": "Your Name",
    "devDependencies": {
       	"grunt": "0.x.x",
        "grunt-contrib-jshint": "*",
		"grunt-contrib-concat": "~0.1.1",
        "grunt-contrib-uglify": "~0.1.0",
        "grunt-contrib-watch": "~0.1.4"
      }
}

3.配置Gruntfile.js脚本文件##

模块安装好了之后，就是配置Gruntfile.js文件了。

首先，手动新建一个Gruntfile.js，如下：

module.exports = function(grunt) {

// 配置Grunt各种模块的参数
  grunt.initConfig({
        jshint: { /* jshint的参数 */ },
    	concat: { /* concat的参数 */ },
    	uglify: { /* uglify的参数 */ },
    	watch:  { /* watch的参数 */ }
	});

// 从node_modules目录加载模块文件
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');

// 每行registerTask定义一个任务
	grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
	grunt.registerTask('check', ['jshint']);

具体的详细配置可以参照下面的参考资料！

参考资料：
http://gruntjs.cn/sample-gruntfile/
https://github.com/gruntjs
http://javascript.ruanyifeng.com/tool/grunt.html
http://caibaojian.com/grunt.html