現在前端自動化已經是家常便飯，各種工具也是層出不窮，grunt、gulp、webpack是應用最廣的三種工具，雖然grunt看似已垂垂老矣，但是以前寫的很多專案一直用的就是grunt，溫故方能知新，這裡把grunt的基本操作再記錄一下。
開始使用grunt很簡單，在專案的根目錄中新增兩份檔案：package.json 和 gruntfile.js。npm安裝模組和外掛程式的操作就不細說了，主要是在gruntfile.js中填寫配置**。**目錄結構如下：
然後我們就來介紹最常用的幾個外掛程式：
合併**是我們最需要的乙個功能了，當專案變大並且模組很多的時候，就拿我們這個angular的單頁應用專案來說，index頁面會有一列的js**，如下圖所示：
我們需要將這些js合併為乙個檔案，大大減少網路請求數量因此來提公升效能。grunt-contrib-concat完美勝任，下面我們來看看基本配置用法：
module.exports = function(grunt)
}});
grunt.loadnpmtasks('grunt-contrib-concat');
grunt.registertask('default', ['concat']);
};
};這裡我將concat後的js檔案仍然輸出到當前目錄dest/js下，如下圖所示：
使用上面兩個外掛程式合併壓縮後，每次都需要手動去html頁面中修改引用路徑，這並不是我們想要的結果，並且直接在源版本上修改也不利於測試與發布，因此首先我們需要用到grunt-contrib-copy外掛程式，將源**copy乙份，然後在副本上進行壓縮合併，這樣無論是全部壓縮還是部分壓縮就比較靈活了，copy之後就可以使用grunt-usemin外掛程式了，usemin是乙個多工外掛程式，它包括兩個任務，useminprepare和usemin。
useminprepare用來檢測html頁面中的指令碼塊，包括指令碼檔案的源路徑，目的路徑，從而更新後續需要使用到的grunt任務的配置資訊，如前面使用的concat，uglify。useminprepare只是分析檔案，獲取檔案及路徑資訊，不更新內容。html中的指令碼塊如下：
而usemin則進行檔案引用替換，將原始檔中的檔案塊替換為壓縮檔案。useminprepare已經幫助我們自動配置了concat，uglify針對的原始檔以及目的檔案的路徑資訊,因此就無需再手動配置concat和uglify任務了。配置**如下
module.exports = function(grunt) ,
useminprepare:
},uglify: }},
usemin:
},copy: ]}}
});grunt.loadnpmtasks('grunt-contrib-clean');
grunt.loadnpmtasks('grunt-contrib-copy');
grunt.loadnpmtasks('grunt-contrib-uglify');
grunt.loadnpmtasks('grunt-contrib-concat');
grunt.loadnpmtasks('grunt-usemin');
grunt.registertask('default', ['clean', 'copy', 'useminprepare', 'concat', 'uglify', 'usemin']);
};
以上就是grunt最基本的使用方法，為了簡單方便，外掛程式的很多配置並沒有介紹與使用，可以在此基礎上檢視官方文件使用更強的功能即可。專案**使用的是大漠窮秋的angular實戰的乙個demo，也是我入門angular的資料，需要注意的是打包angular專案時候要保證嚴格的依賴注入風格，否則合併後會報錯的。
中文官網
usemin使用
hexo使用grunt實現自動化 hexo
本文介紹hexo使用grunt實現一些自動化操作。開發過前端或者node.js的同學對grunt應該不陌生，如果對grunt不熟悉可略過本文。開始使用hexo來處理靜態部落格時我就遇到了問題，我的文章已經寫了很多篇了，都是markdown格式，而且託管在github上了，然而hexo並不支援匯入文章...
前端自動化開發之grunt
上篇文章介紹了前端模組化開發工具seajs，利用seajs我們可以輕鬆實現前端的模組化程式設計，參見 一 準備工作 再使用grunt之前，我們先要安裝node.js，利用node的包管理工具npm來安裝grunt 關於如何安裝及配置node不屬於本文涉及範疇，所以在這裡不做介紹，需要檢視的童鞋可以參...
使用gulp實現前端自動化
const gulp require gulp const clean require gulp clean const fileinclude require gulp file include const rev require gulp rev const revreplace require...