接觸項目時,由於平時要校檢合併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
然後調用npm install就會調用package.json,安裝裏面添加的插件
你會看到node_modules文件夾下有grunt和grunt-contrib-ugligy兩個包
再新建一個js文件:
在命令行中調用grunt命令,你就會發現,你dist文件夾下就有了壓縮好的文件。
怎麼樣是不是很方便呢。項目越大,它的優勢就很明顯了O(∩_∩)O
下來發現合併壓縮後的代碼貼進去不能使用,後來發現,依賴的js文件都合併爲一個主文件了,文件名當然就不對了,所以在使用seajs中define前要加上兩個參數:
第一個參數:當前模塊的ID,第二個參數:依賴模塊的數組
例如:
然後再運行,是不是可以了呢^_^
其實grunt搭配seajs使用會更加方便,下來可以接觸一下吧。