【www.bbyears.com--php入门】
安装
说实话，最好的教程还是官方的。目前我使用的版本是v0.4.1。安装grunt需要先安装node.js。现在node的安装也很方便，下载下来直接安装完成之后，在cmd下测试node --version和npm --version是否正确显示即可。
之后需要借助npm来安装grunt-cli，注意，不是安装grunt。想要在cmd中使用grunt命令，需要npm install -g grunt-cli。完成后测试grunt --version看是否正确显示grunt-cli版本。
这样，就完成了grunt的安装。
在项目中使用
首先创建一个项目目录，由于grunt是node环境下运行，需要使用npm进行管理。所以项目必须要有一个package.json文件，里面最重要的是写明白devDependencies依赖关系。这里有一个例子（用于编译less）可以使用：
{
"name": "ProjectName",
"version": "0.1.0",
"devDependencies": {
"grunt": "*",
"grunt-contrib-less": "*",
"grunt-contrib-watch": "*"
}
}
有了package.json文件之后，我们就可以使用npm install来建立项目了。但是此时，还不能使用grunt命令，因为还差一个Gruntfile.js或者Gruntfile.coffee的文件。这个文件作用是grunt如何工作。继续那个例子（编译less）的Gruntfile.js如下：
代码如下module.exports = function (grunt) {
grunt.initConfig({
less: {
compile: {
files: {
"css/test.css": "css/test.less"
}
},
yuicompress: {
files: {
"css/test-min.css": "css/test.css"
},
options: {
yuicompress: true
}
}
},
watch: {
scripts: {
files: ["css/*.less"],
tasks: ["less"]
}
}
});
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default", ["less", "watch"]);
};
这样，在项目路径下，就可以执行grunt来完成对css路径下less文件的实时编译了。
小技巧
我觉得入门的时候，最烦人的就是package.json和Gruntfile.js的创建。所以grunt有一个grunt-init的工具，项目地址。通过npm install -g grunt-init安装之后，还需要创建~/.grunt-init目录。在此目录中通过git clone来加载模版。模版加载完成之后，就可以通过grunt-init TEMPLATE来创建了。
另一个小技巧，在项目目录下，先通过npm init创建默认的package.json文件，然后npm install。以后需要用到哪个模块的时候（比如grunt），使用npm install
这一节，我主要学习下Gruntfile.js怎么去写。顺便搭建一个上节课的用于实时编译coffee, less，并且打包压缩js,css文件的grunt。
说一下这一次的项目结构：
├── src
│ ├──index.html
│ ├── scripts
│ └── styles
└── utils
├── node_modules
│ ├── grunt
│ └── grunt-contrib-xxxx
├── Gruntfile.js
└── package.jsonsrc是我开发的项目的目录，utils是grunt的目录。涉及到的package.json如下：
"name": "utils",
"version": "0.1.0",
"devDependencies": {
"grunt": "*",
"grunt-contrib-less": "*",
"grunt-contrib-coffee": "*",
"grunt-contrib-concat": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*"
}
}
Gruntfile.js 结构 www.111Cn.net
典型的模块写法：
// config here
};
grunt.initConfig里面写什么呢，第一个，写pkg : grunt.file.readJSON("package.json"),使得之后可以通过<% %>获取package里的内容。
接下来，就是任务的定义了。具体什么任务，要看加载了什么任务包。用什么任务包，去plugin查查吧。我这里用的都是grunt-contrib-*就是官方提供的。
比如grunt-contrib-less任务包，命令可以如下：
代码如下 less: {compile: {
options: {},
files: {
"../src/styles/result.css": "../src/styles/source.less",
// "../src/styles/another.css": ["../src/styles/sources/*.less", "../src/styles/more/*.less"]
}
},
glob_to_multiple: {
expand: true,
flatten: true,
cwd: "../src/styles/",
src: ["*.less"],
dest: "../src/styles/",
ext: ".css"
}
}
说明一下，如果不需要子命令。那么直接在less:{}去写files等参数，调用也是直接grunt less调用。但是,如果需要子命令，比如为了开发，发布时候做的不同处理。需要在less:{}中再命名一个子命令subTaskName: {}，这里的subTaskName是随意取的。使用的时候，通过grunt less:subTaskName使用。
加载任务包
搜索plugin查找你需要使用的任务包，通过npm install
安装modules之后，在Gruntfile.js中，使用grunt.loadNpmTasks("grunt-contrib-less");来加载。
命名任务
通过grunt.registerTask("default", ["less"]);来命名，这里defalut表示grunt。其实就是指grunt, grunt default和grunt less命令一直。你可以修改defalut,然后配置不同的任务。
实例
这里我给出一个我自己写的Gruntfile.js文件。欢迎大家fork。
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON("package.json"),
coffee: {
compile: {
// 选项
options: {},
// 指定文件编译
files: {
// 1:1 compile
"../src/scripts/result.js": "../src/scripts/source.coffee",
// compile and concat into single file
// "../src/scripts/another.js": ["../src/scripts/sources/*.coffee", "../src/scripts/more/*.coffee"]
}
},
// 实时编译，1:1
glob_to_multiple: {
expand: true,
flatten: true,
cwd: "../src/scripts/",
src: ["*.coffee"],
dest: "../src/scripts/",
ext: ".js"
// 后面还可以继续写cwd~ext内容
}
},
less: {
compile: {
options: {},
files: {
"../src/styles/result.css": "../src/styles/source.less",
// "../src/styles/another.css": ["../src/styles/sources/*.less", "../src/styles/more/*.less"]
}
},
glob_to_multiple: {
expand: true,
flatten: true,
cwd: "../src/styles/",
src: ["*.less"],
dest: "../src/styles/",
ext: ".css"
}
},
// 合并文件
concat : {
css : {
files: {
// des: src对应关系
"../src/dest/result.css": ["../src/styles/**/*.css"]
}
},
js : {
files: {
"../src/dest/result.js": ["../src/scripts/**/*.js"]
}
}
},
// 压缩JS
uglify : {
options : {
banner : "/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ "
},
build : {
src : "../src/dest/*.js",
dest : "../src/dest/result.min.js"
}
},
watch: {
// 写任务名称，然后写监控文件，使用的任务,
// 多个文件夹监听，要追个写出到files数组中
coffee: {
files: ["../src/scripts/*.coffee"],
tasks: ["coffee:glob_to_multiple"]
},
less: {
files: ["../src/styles/*.less"],
tasks: ["less:glob_to_multiple"]
}
}
}); www.111cn.net
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-coffee");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default", ["coffee:glob_to_multiple", "less:glob_to_multiple"]);
};
项目中常用的Grunt任务：
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-requirejs --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-jasmine --save-dev
npm install grunt-template-jasmine-requirejs --save-dev
这里有几件事情要注意：第一你要先安装Grunt(这是Grunt CLI的一部分)。我们已经讨论过了，这意味着我们可以安装我们需要的不同的Grunt版本(根据项目需求)。
另一件事情是使用--save-dev标记，这意味着我们的package.json文件会自动更新，包括依赖我们刚刚安装的。
因为这些依赖荐是安装在本地，你会发现一个新的node_module文件夹出现在您的项目中。这个目录包含上述所有依赖项目/我们刚刚安装的任务。
我建议您创建一个.gitignore文件(您正在使用Git版本控制系统，对吗？)，忽略这个文件夹(你不想最终将这些模块提交到你的版本库让其他用户下载，最好让他们按上面的指示安装自己需要的模块)。