grunt的入門教程 (uglify jshint csslint watch )

（學習過程當中遇到問題，隨時與我溝通）

一、使用grunt優化web項目前，先下載node.js,下載地址:https://nodejs.org/dist/v4.4.1/node-v4.4.1-x64.msi,下載後如圖所示：

點擊安裝，一路next便可安裝成功，輸入:node -v,查看安裝版本，如圖：

二、node.js安裝完成後便可使用npm工具安裝grunt,先將grunt-cli安裝到全局環境中，代碼以下：

npm install -g grunt-cli

（上述命令須要使用Administrator 權限，不然安裝不了）

出現如圖提示即爲成功：

三、建立一個簡單的grunt優化項目工做空間，包含文件夾：src test build ,文件：Gruntfile.js，package.json，如圖：

在package.json文件中添加以下內容：

{
  "version": "1.0.0",
  "name": "test",
  "devDependencies": {

  }
}

name是定義項目名稱，versiong定義版本號，devDependencies 定義開發依賴項，即咱們如今這個系統，將會依賴於哪些工具來開發。

四、安裝grunt。在cmd中跳轉到項目目錄裏面執行安裝grunt代碼，代碼以下：

D:

cd grunt 

npm install grunt --save-dev

安裝成功會出現如圖所示提示：

打開package.json文件，查看內容會發現devDependencies中多了 "grunt": "^0.4.5" 依賴項，安裝的其餘工具會在這裏添加依賴項。

查看grunt項目目錄，多了node_modules文件夾，存放grunt源文件，如圖所示：

再經過指令grunt確認grunt是否安裝成功。

上圖代表grunt已正確安裝，圖中警告是接下來須要配置的內容。

五、配置Gruntfile.js。該文件時爲grunt運行提供配置的文件，最簡單的配置以下：

module.exports = function(grunt) {
//任務配置，全部插件的配置信息
    grunt.initConfig({
                //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        
        
    });

        grunt.registerTask('default', []);

};                    

上圖中警告 default，就是在這裏進行配置。registerTask方法中數組用來存放引用的grunt組件。

再次運行grunt，結果以下：，說明配置OK。

六、使用uglify插件。Uglify插件的功能就是壓縮javascript代碼。運行命令以下：

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

--save-dev 指令會往package.json文件中的devDependencies添加uglify的依賴項。

 

運行結果如上圖，說明uglify組件安裝成功，忽略warn警告。

如今演示壓縮。首先向src文件夾中添加須要壓縮的內容：

 

test.js中代碼以下：

function test(obj){

    obj.name="test";
    alert(obj.name);
};

如今須要對上述文件進行壓縮，壓縮前須要在Gruntfile.js文件中添加配置，代碼以下：

module.exports = function(grunt) {
//任務配置，全部插件的配置信息
    grunt.initConfig({

        //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        
        //uglify插件的配置信息
        uglify: {
            build:{
　　　　　　　　　//須要壓縮的文件 ** 代指多個任意文件按下的內容 *.js會匹配全部js
                src:'src/**/*.js',
　　　　　　　　　//dest表明壓縮後的文件存放的目錄
                dest:'build/'
            }
        }
    });
        //告訴grunt咱們使用插件
        grunt.loadNpmTasks('grunt-contrib-uglify');
        
        //告訴grunt當咱們在終端中輸入grunt時須要作什麼（注意前後順序）
        grunt.registerTask('default', ['uglify']);

};

將上述配置修改完成後，運行grunt指令，查看控制檯輸出信息：

說明文件壓縮成功，去看下文件壓縮後的格式。

至此uglify 壓縮組件使用完成。

 

您能夠給給小小飛發個紅包以資鼓勵