天天看點

gruntjs随筆

接觸項目時,由于平時要校檢合并js代碼、壓縮CSS/JS代碼、壓縮圖檔、linting等,顯得很機械化,于是gruntjs就順理成章的成為了首選。

gruntjs是基于nodejs的建構工具,是以使用前先要安裝node。我使用過node是以省略安裝過程了。

接下來安裝grunt:在指令行中輸入

》npm install -g grunt-cli

》npm install grunt --save-dev

在使用 grunt -version檢視版本資訊,如果出現版本資訊,恭喜你,成功了。(現在關掉了指令行,沒圖了,失策Σ( ° △ °|||)︴)

grunt的插件很多(應該有2K多),要什麼插件就要自己下載下傳什麼插件來用。

對于接觸過node的都知道,它有個包管理器package.json.

在你的項目檔案下建一個package.json

這裡我安裝了個常用的js代碼壓縮工具:grunt-contrib-uglify

gruntjs随筆

然後調用npm install就會調用package.json,安裝裡面添加的插件

你會看到node_modules檔案夾下有grunt和grunt-contrib-ugligy兩個包

再建立一個js檔案:

gruntjs随筆

在指令行中調用grunt指令,你就會發現,你dist檔案夾下就有了壓縮好的檔案。

怎麼樣是不是很友善呢。項目越大,它的優勢就很明顯了O(∩_∩)O

下來發現合并壓縮後的代碼貼進去不能使用,後來發現,依賴的js檔案都合并為一個主檔案了,檔案名當然就不對了,是以在使用seajs中define前要加上兩個參數:

第一個參數:目前子產品的ID,第二個參數:依賴子產品的數組

例如:

gruntjs随筆

然後再運作,是不是可以了呢^_^

其實grunt搭配seajs使用會更加友善,下來可以接觸一下吧。