接觸項目時,由于平時要校檢合并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
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiclRnblN0LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX90TQOBTRq1kMFpXT4FEVkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DOyMjN1ITNyIjMwETM0EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
然後調用npm install就會調用package.json,安裝裡面添加的插件
你會看到node_modules檔案夾下有grunt和grunt-contrib-ugligy兩個包
再建立一個js檔案:
在指令行中調用grunt指令,你就會發現,你dist檔案夾下就有了壓縮好的檔案。
怎麼樣是不是很友善呢。項目越大,它的優勢就很明顯了O(∩_∩)O
下來發現合并壓縮後的代碼貼進去不能使用,後來發現,依賴的js檔案都合并為一個主檔案了,檔案名當然就不對了,是以在使用seajs中define前要加上兩個參數:
第一個參數:目前子產品的ID,第二個參數:依賴子產品的數組
例如:
然後再運作,是不是可以了呢^_^
其實grunt搭配seajs使用會更加友善,下來可以接觸一下吧。