Grunt安装使用入门教程

作者：袖梨 2022-11-14

安装
说实话，最好的教程还是官方的。目前我使用的版本是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 --save-dev会自动把依赖关系写入到package.json中。--save-dev会自动维护package.json文件。

这一节，我主要学习下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
典型的模块写法：

代码如下	复制代码
module.exports = function(grunt) { // 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 --save-dev来安装。-save-dev参数自动维护package.json文件。

安装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.111com.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 --save-dev
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版本控制系统，对吗？)，忽略这个文件夹(你不想最终将这些模块提交到你的版本库让其他用户下载，最好让他们按上面的指示安装自己需要的模块)。