26
《JavaScript開發框架權威指南》——2.2 Grunt是如何工作的
本節書摘來自異步社區《JavaScript開發框架權威指南》一書中的第2章，第2.2節，作者：【美】Tim Ambler , Nicholas Cloud著，更多章節內容可以訪問雲棲社區“異步社區”公眾號查看
2.2 Grunt是如何工作的
Grunt為開發者提供了一個工具包，用於創建命令行程序來執行項目構建過程中的重複性任務，如壓縮JavaScript代碼、編譯Sass樣式表等。不過，Grunt的能力並不限於創建簡單的任務（通常這些任務不會被分享或者複用），以解決特定工程遇到的特定需求，其真正的力量源於其將任務打包為可複用的插件的能力。這些插件可以被發布、分享、使用以及由其他人進行改進。本書寫作之時已經有超過4 400個這樣的插件。
Grunt的運轉依賴於四個核心組件，接下來逐一論述。
2.2.1 Gruntfile.js
在Grunt中處於核心地位的是Gruntfile——一個位於工程根目錄下的名為Gruntfile.js（見清單）的Node模塊。正是這個文件使得我們可以加載Grunt插件，創建自定義任務，並根據項目需求對它們進行配置。Grunt每次運行時的首要任務都是接受該模塊發出的指令。
清單2-2 Gruntfile示例
// example-starter/Gruntfile.js
module.exports = function(grunt) {
/**
* 配置即將用到的任務和插件
*/
grunt.initConfig({
/* Grunt的file API為開發者提供了與文件係統進行交互所必需的抽象。稍後，我們將在
本章對此進行深入了解。*/
'pkg': grunt.file.readJSON('package.json'),
'uglify': {
'development': {
'files': {
'build/app.min.js': ['src/app.js', 'src/lib.js']
}
}
}
});
/**
* Grunt插件以Node包的形式存在，並由npm發布。這裏，我們加載的是grunt-contrib-uglify插件。
* 該插件包含的任務可以對項目源代碼進行合並與壓縮，以備發布之用。
*/
grunt.loadNpmTasks('grunt-contrib-uglify');
/**
* 這裏，我們創建了一個名為default的任務，其僅有的功能就是調用uglify任務。換句話說，該任務
* 實際上是uglify任務的別名。名為default的任務指明了在命令行中不帶參數調用Grunt時應當執
* 行的動作。在本例中，我們的default任務僅僅調用了一個單獨的任務。不過（依次）調用多個任務
* 其實同樣簡單，隻要在傳入的數組中添加多個條目即可。
*/
grunt.registerTask('default', ['uglify']);
/**
* 這裏，我們創建了一個自定義任務，利用Grunt內置的用戶反饋（user feedback）方法，向控製台
* 輸出一條消息（後麵還有一個換行符）。稍後，我們將在本章對此做深入了解。
*/
grunt.registerTask('hello-world', function() {
grunt.log.writeln('Hello, world.');
});
};
2.2.2 任務（Tasks）
作為Grunt的基本構建模塊，任務實際上隻是由Grunt的registerTask()方法注冊的具名函數。清單所示的hello-world任務將向控製台輸出一條消息。在命令行中調用該任務的結果，如清單所示。
清單2-3 運行清單中所示的hello-world任務
$ grunt hello-world
Running "hello-world" task
Hello, world.
Done, without errors.
如清單所示，多個Grunt任務也可以由單條命令調用執行。每個任務都將按照參數的傳入順序依次執行。
清單2-4 順序運行多個任務
$ grunt hello-world uglify
Running "hello-world" task
Hello, world.
Running "uglify:development" (uglify) task
>> 1 file created.
Done, without errors.
我們剛看到的hello-world任務是簡單獨立型Grunt任務的代表。這樣的任務可以用於實現一些簡單的功能，以解決特定項目的需求。通常我們不會考慮其複用或者分享的問題。但是多數時候，你會發現我們實際用到的都不是這樣的獨立型任務，而是那些已經打包為Grunt插件並發布到npm的任務。以插件的形式發布更便於別人使用或者參與改進。
2.2.3 插件（Plugins）
Grunt插件是一係列能夠用於不同項目的可配置任務（以npm包的形式發布）的集合。現存的Grunt插件數以千計，可謂洋洋大觀。清單中的Grunt方法loadNpmTasks()用以加載名為grunt-contrib-uglify的Node模塊。該模塊可以將工程中的JavaScript代碼合並為單個壓縮（minified）文件，以適應發布需求。
2.2.4 配置
Grunt以強調“配置優先”（configuration over code）而著稱：任務和插件的功能均可通過配置文件進行定製，以適應不同工程的需求。正是這種代碼與配置分離的特性，使開發者能夠創造出容易被複用的插件。本章稍後將介紹配置Grunt插件和任務的各種不同的方法。
最後更新：2017-06-05 14:32:20