安裝
安裝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文件的實時編譯了。