安装
安装grunt需要先安装node.js
。
之后需要借助npm来安装grunt-cli,
在cmd中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'
]);
};
|
这样,在项目路径下,cmd中执行grunt
来完成对css路径下less文件的实时编译了。