在Javascript的開發(fā)過程中,經常會遇到一些重復性的任務,比如合并文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等。通常,我們需要使用不同的工具,來完成不同的任務,既重復勞動又非常耗時。Grunt就是為了解決這個問題而發(fā)明的工具,可以幫助我們自動管理和運行各種任務。
簡單說,Grunt是一個自動任務運行器,會按照預先設定的順序自動運行一系列的任務。這可以簡化工作流程,減輕重復性工作帶來的負擔。
Grunt基于Node.js,安裝之前要先安裝Node.js,然后運行下面的命令。
sudo npm install grunt-cli -g
grunt-cli表示安裝的是grunt的命令行界面,參數(shù)g表示全局安裝。
Grunt使用模塊結構,除了安裝命令行界面以外,還要根據(jù)需要安裝相應的模塊。這些模塊應該采用局部安裝,因為不同項目可能需要同一個模塊的不同版本。
首先,在項目的根目錄下,創(chuàng)建一個文本文件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"
}
}
上面這個package.json文件中,除了注明項目的名稱和版本以外,還在devDependencies屬性中指定了項目依賴的grunt模塊和版本:grunt核心模塊為最新的0.x.x版,jshint插件為最新版本,concat插件不低于0.1.1版,uglify插件不低于0.1.0版,watch插件不低于0.1.4版。
然后,在項目的根目錄下運行下面的命令,這些插件就會被自動安裝在node_modules子目錄。
npm install
上面這種方法是針對已有package.json的情況。如果想要自動生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模塊的名稱和版本即可。
npm init
如果已有的package.json文件不包括Grunt模塊,可以在直接安裝Grunt模塊的時候,加上--save-dev參數(shù),該模塊就會自動被加入package.json文件。
npm install <module> --save-dev
比如,對應上面package.json文件指定的模塊,需要運行以下npm命令。
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
模塊安裝完以后,下一步在項目的根目錄下,新建腳本文件Gruntfile.js。它是grunt的配置文件,就好像package.json是npm的配置文件一樣。Gruntfile.js就是一般的Node.js模塊的寫法。
module.exports = function(grunt) {
// 配置Grunt各種模塊的參數(shù)
grunt.initConfig({
jshint: { /* jshint的參數(shù) */ },
concat: { /* concat的參數(shù) */ },
uglify: { /* uglify的參數(shù) */ },
watch: { /* watch的參數(shù) */ }
});
// 從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']);
};
上面的代碼用到了grunt代碼的三個方法:
grunt.initConfig:定義各種模塊的參數(shù),每一個成員項對應一個同名模塊。
grunt.loadNpmTasks:加載完成任務所需的模塊。
上面的代碼一共加載了四個模塊:jshint(檢查語法錯誤)、concat(合并文件)、uglify(壓縮代碼)和watch(自動執(zhí)行)。接下來,有兩種使用方法。
(1)命令行執(zhí)行某個模塊,比如
grunt jshint
上面代碼表示運行jshint模塊。
(2)命令行執(zhí)行某個任務。比如
grunt check
上面代碼表示運行check任務。如果運行成功,就會顯示“Done, without errors.”。
如果沒有給出任務名,只鍵入grunt,就表示執(zhí)行默認的default任務。
下面通過cssmin模塊,演示如何編寫Gruntfile.js文件。cssmin模塊的作用是最小化CSS文件。
首先,在項目的根目錄下安裝該模塊。
npm install grunt-contrib-cssmin --save-dev
然后,新建文件Gruntfile.js。
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
minify: {
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
},
combine: {
files: {
'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin:minify','cssmin:combine']);
};
下面詳細解釋上面代碼中的三個方法,下面一個個來看。
(1)grunt.loadNpmTasks
grunt.loadNpmTasks方法載入模塊文件。
grunt.loadNpmTasks('grunt-contrib-cssmin');
你需要使用幾個模塊,這里就要寫幾條grunt.loadNpmTasks語句,將各個模塊一一加載。
如果加載模塊很多,這部分會非常冗長。而且,還存在一個問題,就是凡是在這里加載的模塊,也同時出現(xiàn)在package.json文件中。如果使用npm命令卸載模塊以后,模塊會自動從package.json文件中消失,但是必須手動從Gruntfile.js文件中清除,這樣很不方便,一旦忘記,還會出現(xiàn)運行錯誤。這里有一個解決辦法,就是安裝load-grunt-tasks模塊,然后在Gruntfile.js文件中,用下面的語句替代所有的grunt.loadNpmTasks語句。
require('load-grunt-tasks')(grunt);
這條語句的作用是自動分析package.json文件,自動加載所找到的grunt模塊。
(2)grunt.initConfig
grunt.initConfig方法用于模塊配置,它接受一個對象作為參數(shù)。該對象的成員與使用的同名模塊一一對應。由于我們要配置的是cssmin模塊,所以里面有一個cssmin成員(屬性)。
cssmin(屬性)指向一個對象,該對象又包含多個成員。除了一些系統(tǒng)設定的成員(比如options),其他自定義的成員稱為目標(target)。一個模塊可以有多個目標(target),上面代碼里面,cssmin模塊共有兩個目標,一個是“minify”,用于壓縮css文件;另一個是“combine”,用于將多個css文件合并一個文件。
每個目標的具體設置,需要參考該模板的文檔。就cssmin來講,minify目標的參數(shù)具體含義如下:
expand:如果設為true,就表示下面文件名的占位符(即*號)都要擴展成具體的文件名。
cwd:需要處理的文件(input)所在的目錄。
src:表示需要處理的文件。如果采用數(shù)組形式,數(shù)組的每一項就是一個文件名,可以使用通配符。
dest:表示處理后的文件名或所在目錄。
除了上面這些參數(shù),還有一些參數(shù)也是grunt所有模塊通用的。
filter:一個返回布爾值的函數(shù),用于過濾文件名。只有返回值為true的文件,才會被grunt處理。
dot:是否匹配以點號(.)開頭的系統(tǒng)文件。
關于通配符,含義如下:
比如,foo/*.js匹配foo目錄下面的文件名以.js結尾的文件,foo/*/.js匹配foo目錄和它的所有子目錄下面的文件名以.js結尾的文件,!*.css表示匹配所有后綴名不為“.css”的文件。
使用通配符設置src屬性的更多例子:
{src: 'foo/th*.js'}grunt-contrib-uglify
{src: 'foo/{a,b}*.js'}
{src: ['foo/a*.js', 'foo/b*.js']}
至于combine目標,就只有一個files參數(shù),表示輸出文件是css子目錄下的out.min.css,輸入文件則是css子目錄下的part1.min.css和part2.min.css。
files參數(shù)的格式可以是一個對象,也可以是一個數(shù)組。
files: {
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
},
// or
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],
如果minify目標和combine目標的屬性設置有重合的部分,可以另行定義一個與minify和combine平行的options屬性。
grunt.initConfig({
cssmin: {
options: { /* ... */ },
minify: { /* ... */ },
combine: { /* ... */ }
}
});
(3)grunt.registerTask
grunt.registerTask方法定義如何調用具體的任務。“default”任務表示如果不提供參數(shù),直接輸入grunt命令,則先運行“cssmin:minify”,后運行“cssmin:combine”,即先壓縮再合并。如果只執(zhí)行壓縮,或者只執(zhí)行合并,則需要在grunt命令后面指明“模塊名:目標名”。
grunt # 默認情況下,先壓縮后合并
grunt cssmin:minify # 只壓縮不合并
grunt css:combine # 只合并不壓縮
如果不指明目標,只是指明模塊,就表示將所有目標依次運行一遍。
grunt cssmin
grunt的模塊已經超過了2000個,且還在快速增加。下面是一些常用的模塊(按字母排序)。
模塊的前綴如果是grunt-contrib,就表示該模塊由grunt開發(fā)團隊維護;如果前綴是grunt(比如grunt-pakmanager),就表示由第三方開發(fā)者維護。
以下選幾個模塊,看看它們配置參數(shù)的寫法,也就是說如何在grunt.initConfig方法中配置各個模塊。
jshint用來檢查語法錯誤,比如分號的使用是否正確、有沒有忘記寫括號等等。它在grunt.initConfig方法里面的配置代碼如下。
jshint: {
options: {
eqeqeq: true,
trailing: true
},
files: ['Gruntfile.js', 'lib/**/*.js']
},
上面代碼先指定jshint的檢查項目,eqeqeq表示要用嚴格相等運算符取代相等運算符,trailing表示行尾不得有多余的空格。然后,指定files屬性,表示檢查目標是Gruntfile.js文件,以及l(fā)ib目錄的所有子目錄下面的JavaScript文件。
concat用來合并同類文件,它不僅可以合并JavaScript文件,還可以合并CSS文件。
concat: {
js: {
src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],
dest: 'dist/script.js'
}
css: {
src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],
dest: 'dist/screen.css'
}
},
js目標用于合并JavaScript文件,css目標用語合并CSS文件。兩者的src屬性指定需要合并的文件(input),dest屬性指定輸出的目標文件(output)。
uglify模塊用來壓縮代碼,減小文件體積。
uglify: {
options: {
banner: bannerContent,
sourceMapRoot: '../',
sourceMap: 'distrib/'+name+'.min.js.map',
sourceMapUrl: name+'.min.js.map'
},
target : {
expand: true,
cwd: 'js/origin',
src : '*.js',
dest : 'js/'
}
},
上面代碼中的options屬性指定壓縮后文件的文件頭,以及sourceMap設置;target目標指定輸入和輸出文件。
copy模塊用于復制文件與目錄。
copy: {
main: {
src: 'src/*',
dest: 'dest/',
},
},
上面代碼將src子目錄(只包含它下面的第一層文件和子目錄),拷貝到dest子目錄下面(即dest/src目錄)。如果要更準確控制拷貝行為,比如只拷貝文件、不拷貝目錄、不保持目錄結構,可以寫成下面這樣:
copy: {
main: {
expand: true,
cwd: 'src/',
src: '**',
dest: 'dest/',
flatten: true,
filter: 'isFile',
},
},
watch模塊用來在后臺運行,監(jiān)聽指定事件,然后自動運行指定的任務。
watch: {
scripts: {
files: '**/*.js',
tasks: 'jshint',
options: {
livereload: true,
},
},
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},
設置好上面的代碼,打開另一個進程,運行grunt watch。此后,任何的js代碼變動,文件保存后就會自動運行jshint任務;任何sass文件變動,文件保存后就會自動運行sass任務。
需要注意的是,這兩個任務的options參數(shù)之中,都設置了livereload,表示任務運行結束后,自動在瀏覽器中重載(reload)。這需要在瀏覽器中安裝livereload插件。安裝后,livereload的默認端口為localhost:35729,但是也可以用livereload: 1337的形式重設端口(localhost:1337)。
下面是另外一些有用的模塊。
(1)grunt-contrib-clean
該模塊用于刪除文件或目錄。
clean: {
build: {
src: ["path/to/dir/one", "path/to/dir/two"]
}
}
(2)grunt-autoprefixer
該模塊用于為CSS語句加上瀏覽器前綴。
autoprefixer: {
build: {
expand: true,
cwd: 'build',
src: [ '**/*.css' ],
dest: 'build'
}
},
(3)grunt-contrib-connect
該模塊用于在本機運行一個Web Server。
connect: {
server: {
options: {
port: 4000,
base: 'build',
hostname: '*'
}
}
}
connect模塊會隨著grunt運行結束而結束,為了使它一直處于運行狀態(tài),可以把它放在watch模塊之前運行。因為watch模塊需要手動中止,所以connect模塊也就會一直運行。
(4)grunt-htmlhint
該模塊用于檢查HTML語法。
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
},
src: ['index.html']
}
}
上面代碼用于檢查index.html文件:HTML標記是否配對、標記名和屬性名是否小寫、屬性值是否包括在雙引號之中、特殊字符是否轉義、HTML元素的id屬性是否為唯一值、head部分是否沒有script標記。
(5)grunt-contrib-sass模塊
該模塊用于將SASS文件轉為CSS文件。
sass: {
build: {
options: {
style: 'compressed'
},
files: {
'build/css/master.css': 'assets/sass/master.scss'
}
}
}
上面代碼指定輸出文件為build/css/master.css,輸入文件為assets/sass/master.scss。
(6)grunt-markdown
該模塊用于將markdown文檔轉為HTML文檔。
markdown: {
all: {
files: [
{
expand: true,
src: '*.md',
dest: 'docs/html/',
ext: '.html'
}
],
options: {
template: 'templates/index.html',
}
}
},
上面代碼指定將md后綴名的文件,轉為docs/html/目錄下的html文件。template屬性指定轉換時采用的模板,模板樣式如下。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="main" class="container">
<%=content%>
</div>
</body>
</html>
更多建議: