Grunt

       Grunt

 

       1 安裝Grunt命令行工具包 grunt-cli

npm install -g grunt-cli

       Grunt被分爲好幾個包，每個包用於特定的目的。grunt-cli包爲我們提供了一個命令行界面。但我們還需要安裝grunt才能使用該界面。安裝grunt-cli時並沒有爲我們自動安裝grunt。

       需要在我們的項目中安裝Grunt作爲依賴。在一個項目中安裝Grunt，可以通過以下步驟實現：

 

       （1）創建一個項目文件夾

       （2）在命令行中瀏覽到該文件夾，通過以下命令爲項目創建一個package.json文件

npm init

       （3） 通過以下命令安裝Grunt

npm install grunt --save-dev

       Grunt的運行需要一個名爲Gruntfile.js的配置文件支持，在該文件中聲明並配置了你想在當前項目中執行的所有任務。

 

       Gruntfile.js文件框架示例：

module.exports = function(grunt) {

}

       它其實定義了一個Node.js的模塊，在模塊中接收一個grunt對象 。

       在grunt上註冊一個默認任務：

module.exports = function(grunt){
	grunt.registerTask('default', function(){
		console.log('Hello from Grunt.');
	});
}

      通過grunt.registerTask()方法可以創建一個新的Grunt任務，創建時可以傳入一個任務名稱以及一個回調函數。當觸發該任務時就會執行相應的回調函數。

 

       處理參數

module.exports = function(grunt){
	grunt.registerTask('greet', function(name){
		grunt.log.writeln('Hi there, ' + name);
	});
}

       執行非default命名任務

grunt greet

       在執行任務時提供實際參數

grunt greet:winstar

       傳多個參數

grunt addNumbers:1:2

       處理異常

grunt.warn('warning info.');

       強制執行任務

grunt addNumbers:a:2 --force

       阻止強制執行

grunt.fatal()

       一次註冊多個任務

grunt.registerTask('all', ['default', 'greet:Brain', 'addNumbers:2:3']);

       registerTask()方法還可以接收第三個參數，在任務名稱之後回調函數之前，可以添加對該任務的描述。

 

       配置選項，Grunt提供了grunt.config.inig()方法用於配置Grunt任務。示例如下：

grunt.config.init({
});

       創建目錄

       Grunt內置的grunt.file.mkdir()方法可用以創建文檔目錄。 創建文檔目錄示例如下：

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working'
			}
		}
	});
	
	grunt.registerTask('createFolder', 'Create the working folder', function(){
		grunt.config.requires('copyFiles.options.workingDirectory');
		grunt.file.mkdir(grunt.config.get('copyFiles.options.workingDirectory'));
	});
}

grunt createFolder

       刪除目錄

       使用grunt.file.delete()方法 

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working'
			}
		}
	});
	
	grunt.registerTask('clean', 'Deletes the working folder and its contents', function(){
		grunt.config.requires('copyFiles.options.workingDirectory');
		grunt.file.delete(grunt.config.get('copyFiles.options.workingDirectory'));
	});
}

       複製文件

       使用grunt.file.copy()方法

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working',
				manifest: [
					'index.html', 'stylesheets/style.css', 'javascripts/app.js'
				]
			}
		}
	});
	
	grunt.registerTask('copyFiles', function(){
		var files, workingDirectory;
		
		grunt.config.requires('copyFiles.options.manifest');
		grunt.config.requires('copyFiles.options.workingDirectory');
		
		files = grunt.config.get('copyFiles.options.manifest');
		workingDirectory = grunt.config.get('copyFiles.options.workingDirectory');
		
		files.forEach(function(file){
			var destination = workingDirectory + '/' + file;
			grunt.log.writeln('Copying ' + file + ' to ' + destination);
			grunt.file.copy(file, destination);
		});
	});
}

       Grunt提供的其他方法

       grunt.file.isDir()    判斷是否爲目錄

       grunt.file.recurse()    文件/目錄遞歸

       grunt.file.read()             讀取指定文件內容

       grunt.file.write()            將指定內容寫到文件中

       grunt.file.readJSON()    讀取JSON數據

       grunt.template.process()   創建一個模板字符串片段，該片段可以用於寫進一個文檔中

 

       在註冊任務時還可以通過this.options()方法獲取Grunt的配置對象，如前面的files可以通過以下方式獲得：

files = this.options().manifest;

   

       在註冊任務時還可以通過this.name方式獲取任務名稱。