前端自動化grunt輕鬆入門

時間 2019-11-21

原文原文鏈接

若是你還不瞭解grunt，或者只是聽過它的名字而沒有去研究過它，那麼這篇入門級的文章就是爲你寫的，相信看完你就會愛上grunt！css

grunt是什麼？ node

grunt是一個很是好的自動化工具，你只管codeing，它會自動幫你將代碼合併（concat）、壓縮（uglify）、語法檢查（jshint）、自動編譯less（contrib-less）和sass（contrib-sass）、壓縮圖片（contrib-imagemin）、讀寫拷貝移動文件等等，極大地簡化了你的工做，它有不少插件，前面說到的每一個功能都是一個插件，若是沒有符合你胃口的插件，你能夠本身開發並提交到這裏。npm

要使用grunt，從哪裏開始？json

OK，相信grunt提供的某些功能仍是能吊起你的胃口，grunt和grunt的插件都是經過npm安裝和卸載的，npm是Nodejs的包管理器，因此咱們首先安裝nodejs，有同窗在這裏就被嚇到了，nodejs我徹底不會啊，接下來還看得懂嗎？放一萬個心，徹底沒問題。安裝nodejs很簡單，打開nodejs官網，戳中間那個INSTALL按鈕就好。安裝好了以後打開命令行，不要告訴我你不知道什麼叫命令行？OK，按下快捷鍵win+r鍵，輸入cmd回車，出現一個黑黑的窗口，輸入node -v回車以後會顯示你剛剛安裝好的nodejs版本，那就表示nodejs安裝成功了，恭喜你完成了第一步！數組

接下來須要安裝CLI，這是個什麼鬼？爲何要裝它？不愛問爲何的同窗不是好同窗。OK，CLI就是grunt的命令行，安裝了CLI以後，就能夠在任何目錄下執行grunt命令了。什麼是grunt命令？請繼續往下看。sass

安裝CLI命令：app

npm install -g grunt-cli

執行完以後less

接下來要講的內容，是一個項目剛剛開始用grunt管理的時候應該怎麼去作，就好像你學會了grunt，如今想將grunt應用到手上的項目中去。咱們在E盤建一個demo文件夾，這個demo就比如你手上的項目。函數

首先在項目的根目錄下（也就是demo下）新建兩個文件：package.json 和 Gruntfile.js。grunt

package.json裏面放些什麼東西呢？什麼項目名稱啊、版本號啊、描述之類的，固然最重要的是將項目所用到的grunt插件放到它的devDependencies字段內，它大概長這樣：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "這就是個demo",
  // 項目用到的grunt插件列表及插件版本號
  "devDependencies": {"grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.3.0","grunt-contrib-copy": "^0.8.0",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

固然了，若是你知道插件的版本號，能夠直接寫在這裏面，若是不知道，能夠在安裝插件的時候在命令行後面加一個命令「--save-dev」讓它自動保存在這裏。

Gruntfile.js是用來配置grunt任務的，它還能夠用來加載grunt插件。看到這裏不明白沒關係，後面還會說。

配置好了package.json，回到命令行，切換到demo根目錄下（怎麼切換？直接輸入E:而後回車就切換到E盤了，而後輸入cd demo回車就打開demo目錄），執行下面的命令會自動安裝package.json裏配置的grunt插件，如今知道package.json的用處了吧，執行命令前先把package.json裏那句註釋去掉，否則會報錯

npm install

安裝完後，demo裏面會多出來一個node_modules文件夾，裏面就是剛剛安裝的grunt插件了

OK，安裝步驟到這裏結束，下面開始真正使用grunt的階段了。

任務配置——文件合併

什麼是任務？每一個grunt插件都是一個任務，安裝了上面那麼些插件，都有些什麼用？先來看第一個插件"grunt-contrib-concat"，它是用來合併文件的，下面看看它怎麼用的吧。

先在demo下新建一個src文件夾，在裏面新建3個js文件分別叫a.js、b.js和c.js；3個文件內容分別是:

// a.js內容
function aaa(){
    return "aaa";
}
// b.js內容
function bbb(){
    return "bbb";
}
// c.js內容
function ccc(){
    return "ccc";
}

那麼怎麼用插件"grunt-contrib-concat"來合併這3個文件呢？請在Gruntfile.js裏面寫入下面的內容：

module.exports = function(grunt) {
    // 任務配置
    grunt.initConfig({
        // 配置concat任務
        concat: {
            options: {
                // 配置合併的文件內容之間的分隔符
                separator: ';'
            },
            dist: {
                // 要合併的文件
                src: ['src/a.js', 'src/b.js', 'src/c.js'],
                // 合併爲哪一個文件
                dest: 'dist/all.js'
            }
        }
    });
    // 加載插件
    grunt.loadNpmTasks('grunt-contrib-concat');
}

保存以後在命令行裏輸入grunt concat回車，命令行輸出「File 'dist/all.js' created」就表示文件合併成功了！就這麼簡單！

demo文件夾下會多出一個dist文件夾，裏面就是合併好的文件all.js

到這一步你已經學會了grunt的基本用法了，其它任務也都是兩步：一配置任務，二調用任務執行，並且任務配置好了之後只要調用命令執行就行了，一勞永逸啊。

也許你還不太理解上面Gruntfile.js的配置怎麼來的？Gruntfile.js包括四個部分：

"wrapper" 函數
任務配置
加載grunt插件和任務
自定義任務

從上面的配置已經能夠看得很清楚了，最外層的函數就是"wrapper"函數，任務配置即grunt.initConfig({……})這一段，grunt.loadNpmTasks(插件名稱)用於加載grunt插件和任務的，最後一個自定義任務在哪呢？

自定義任務：grunt.registerTask(taskName,description,taskFunction)接收三個參數，第一個是任務名稱，第二個是任務描述，第三個是任務執行時執行的函數。當第二個參數是數組時，數組內能夠傳入其它任務名稱，當執行自定義任務時，就會執行數組內的任務。

任務配置裏面配置了哪一個任務，那麼下面就要用grunt.loadNpmTasks加載對應的插件，這裏配置的是concat這個任務，所以下面對應加載grunt-contrib-concat插件。任務配置是以任務名稱命名的屬性，grunt.initConfig中能夠配置多個任務，每一個任務的具體配置參數能夠到這裏找到對應的插件進行查看。

任務配置——代碼壓縮

接下來咱們來配置多個任務，將合併後的js壓縮，壓縮js的插件"grunt-contrib-uglify"在package.json有配置過，在執行npm install命令的時候已經安裝好了，下面開始配置：

module.exports = function(grunt) {
    // 任務配置
    grunt.initConfig({
        // 配置concat任務
        concat: {
            options: {
                // 配置合併的文件內容之間的分隔符
                separator: ';'
            },
            dist: {
                // 要合併的文件
                src: ['src/a.js', 'src/b.js', 'src/c.js'],
                // 合併爲哪一個文件
                dest: 'dist/all.js'
            }
        },
　　　　// 配置壓縮任務
        uglify: {
            client: {
                files:{
　　　　　　　　　　　　// 壓縮後js路徑和要壓縮的js路徑(沒錯，這裏是個數組，能夠直接將多個js合併後壓縮) "dist/all.min.js": ["dist/all.js"]
                }
            }
        }
    });
    // 加載插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 自定義任務
    grunt.registerTask("build",["concat","uglify"]);
}

執行自定義任務build

grunt build

輸出的all.min.js就是合而且壓縮後的代碼

任務配置——文件watch+自動編譯less

最後，來作一個自動編譯less的案例，這個案例須要用到watch插件和less插件，這倆插件以前沒有安裝，那麼如今安裝一下

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev

後面的「--save-dev」會將這個插件及其版本號保存到package.json。安裝完成後在Gruntfile.js加入配置：

module.exports = function(grunt) {
    // 任務配置
    grunt.initConfig({
        // 配置watch任務
        watch: {
            // 要監聽的文件
            files: ["less/index.less"],
            // 監聽的文件發生變化時執行的任務
            tasks: ["less"]
        },
        less: {
            development: {
                options: {
                    // 是否壓縮編譯後的css
                    compress: true
                },
                files: {
                    // 編譯後的css路徑和要編譯的less路徑
                    "less/index.css": ["less/index.less"]
                }
            }
        }
        
    });
    // 加載插件
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    // 自定義任務
    grunt.registerTask("default",["watch"]);
}

執行任務

grunt

注意：由於配置裏面自定義任務設置了default即默認任務爲watch，因此命令行裏輸入grunt和grunt watch的效果是同樣的。執行後，命令行輸出

Running "watch" task
Waiting...

表示正在監聽，切換到index.less去新增一些樣式而後保存，watch監聽到index.less有變化輸出

Completed in 1.560s at Fri Jun 26 2015 23:41:22 GMT+0800 (中國標準時間) - Waitin
g...
>> File "less\index.less" changed.
Running "less:development" (less) task
File less/index.css created

同時執行了less編譯任務，在less文件夾自動生成了index.css。之前用考拉（一個less編譯軟件）編譯less，常常寫了幾行樣式發現軟件沒有打開，換作grunt以後就方便多了。

以上就是本次要分享的所有內容了，是否是很輕鬆就入門了？若是本文對你有所幫助，麻煩點個贊吧！

grunt中文官網

by:王美建 from：http://www.cnblogs.com/wangmeijian/ 轉載請保留署名及出處！