個人grunt學習筆記

什麼是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經常使用的相關插件。