什麽是grunt?

　　 Grunt是一個JavaScript任務運行器，用於自動執行頻繁任務（如壓縮，編譯，單元測試）的工具。它使用命令行界面來運行在文件中定義的自定義任務（這個文件稱為Gruntfile）。 Grunt由Ben Alman創建，用Node.js編寫。它通過npm分發。現在，Grunt生態系統中有超過5,000個插件可用。

如何使用grunt?

基本概念

1.CLI(Command-line interface):Grunt的命令行界面（CLI）可以通過npm全局安裝。執行grunt命令將加載並運行當前目錄中本地安裝的Grunt版本。因此，我們可以在不同的文件夾中維護不同版本的Grunt，並根據需要執行相對應的版本。安裝grunt-cli只是將grunt命令放在系統路徑中，允許它從任何目錄運行。安裝grunt-cli不會安裝Grunt任務運行器！ Grunt CLI的工作很簡單：運行已經安裝在Gruntfile文件目錄內的Grunt版本。所以允許多個版本的Grunt同時安裝在同一臺機器上。

2.package.json文件:包含項目的元數據，包括名稱，版本，描述，作者，許可證及其依賴項（項目所需的Grunt插件）。所有依賴項都列在dependencies或devDependencies部分中。

3.Gruntfile文件:一個名為“Gruntfile.js”或“Gruntfile.coffee”的有效JavaScript或CoffeeScript文件，其中包含用於配置任務，加載現有插件以及創建自定義任務的代碼。

4.任務運行:任務是執行指定作業的模塊。它們在Gruntfile中定義。 開發人員可以從現有的Grunt插件加載預定義的任務以及編寫自定義代碼，以根據需求定義自己的任務。一旦定義，只需執行grunt <taskname>即可從命令行(CLI)運行這些任務。如果Gruntfile中定義的<taskname>是‘default‘，那麽只需執行grunt即可。即不加參數是執行默認的任務。

安裝cli

　　安裝命令很簡單，全局安裝(首先需要先安裝npm到全局)，直接輸入:

npm install -g grunt-cli

　　npm是包管理的工具，-g表示全局安裝，如果直接使用npm install它會找當前目錄下是否有package.json,然後在當前目錄安裝這個文件裏面配置的相關依賴。如果使用npm install <module name> 會安裝指定的模塊。

建立一個package.json

　　這邊我首先先在E盤的目錄下面新建一個gruntTest的測試文件夾:

　　輸入:

npm init

　　接著會讓你填寫相關的信息，選擇默認的，直接按enter下一步！

　　可以見到生成了相關的文件：

安裝grunt和相關插件

　　安裝相關的package的命令格式為：

npm install <module> --save-dev

　　--save-dev的意思是把安裝的module保存到package.json文件的依賴之中。

　　首先需要安裝grunt，安裝後可以使用grunt命令來跑(因為已經安裝了grunt-cli)當前目錄下所安裝的grunt版本。

npm install grunt --save-dev

　　如果你想安裝JSHint任務模塊，運行npm install grunt-contrib-jshint --save-dev即可，可以按需求添加對應的任務模塊(也叫插件)。

編寫Gruntfile

　　Gruntfile.js或Gruntfile.coffee文件是一個有效的JavaScript或CoffeeScript文件，它位於項目的根目錄中，位於package.json文件旁邊，做項目時應該與項目源碼一起提交。

　　Gruntfile.js一般由以下四部分組成

　　1）wrapper“包裝”函數

　　2）項目和任務配置

　　3）加載Grunt插件和任務

　　4）自定義任務

　　以下展示一份壓縮的任務的Gruntfile.js的書寫，

 1 module.exports = function(grunt) {
 2 
 3   // 項目配置
 4   grunt.initConfig({
 5     pkg: grunt.file.readJSON(‘package.json‘),
 6     uglify: {
 7       options: {
 8        
 9       },
10       build: {
11         src: ‘js/src/vue.js‘,
12         dest: ‘js/dest/vue.min.js‘
13       }
14     }
15   });
16 
17   // 加載提供‘uglify‘任務的插件
18   grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
19 
20   // 默認的任務
21   grunt.registerTask(‘default‘, [‘uglify‘]);
22 
23 };

　　先安裝壓縮的插件

npm install grunt-contrib-uglify --save-dev

　　然後運行輸入grunt，即可運行相關的默認任務，

　　可以看出vue.js從源目錄被壓縮到對應的目標目錄。

後面博客會繼續學習grunt常用的相關插件。

我的grunt學習筆記