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


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

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

再新建一個js文件:


在命令行中調用grunt命令,你就會發現,你dist文件夾下就有了壓縮好的文件。

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


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

第一個參數:當前模塊的ID,第二個參數:依賴模塊的數組

例如:

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章