應用Grunt進行CSS壓縮

絕大多數情況下，專案完成後需要將css檔案進行合併壓縮後再部署到生產環境上，這樣既可以減少**的http請求數量，提高載入速度，又可以降低**的流量開銷，降低成本。將多個css檔案合併壓縮為乙個檔案，如果每次手工貼上到一起再壓縮實在是麻煩，而且很難應對頻繁的修改，很容易造成生產環境和開發環境的不一致。對於這個問題，可以採用grunt來進行js/css自動化的壓縮、合併。

grunt是乙個基於node.js的任務執行工具，用於執行各種需要自動化的任務。

下面介紹如何運用grunt進行css壓縮。

假設專案的css檔案全部放在專案目錄下名為css的資料夾中，現在要把它們壓縮合併為乙個名為main-min.css的檔案，放在css-min的資料夾下。

首先保證安裝了node.js。

在專案目錄下建立名為package.json的檔案，用於配置需要安裝的npm包（npm:node.js的包管理系統），package.json的內容如下：

,

"dependencies":
}

完成後從命令列進入到專案目錄下，執行命令

$npm install

編寫grunt配置檔案gruntfile.js。在專案目錄下新建檔案gruntfile.js作為grunt的配置檔案，內容如下：

module.exports = function

(grunt),
compress:}}
});//載入cssmin外掛程式，用於合併和壓縮css
grunt.loadnpmtasks('grunt-contrib-cssmin');
//註冊任務
grunt.registertask('default',['cssmin']);
}

注意：需要先將grunt命令列（cli）安裝到全域性環境中，執行命令

上述命令執行完後，grunt 命令就被加入到你的系統路徑中了，以後就可以在任何目錄下執行此命令了。注意，安裝grunt-cli並不等於安裝了 grunt。grunt cli的任務很簡單：呼叫與gruntfile在同一目錄中 grunt。

這時就可以看到後台自動新建了乙個名為css-min的資料夾，資料夾中是乙個名為main-min.css的檔案，內容是css資料夾中所有.css檔案合併壓縮後的結果。

以後如果css有任何修改，只要執行grunt命令即可。

前端js和css的壓縮合併之grunt

package.json放在根目錄 例如 c users 123 下，它包含了該項目的一些元資訊，如專案名稱 描述 版本號，外掛程式等。grunt contrib jshint js語法檢查 grunt contrib concat js合併 grunt contrib uglify 採用uglif...

使用grunt合併壓縮js css檔案

需要了解的知識 1 nodejs的安裝與命令列使用 2 nodejs安裝應用 3 grunt的初步了解 本文已假定讀者已經熟悉以上知識。好，我們繼續 任務1 將src目錄下的所有zepto及外掛程式合併，並壓縮。src ajax.js assets.js callbacks.js data.js d...

關於requirejs和grunt壓縮合併是否矛盾

requirejs主要是為了模組化開發，這樣帶來的好處不言而喻。但是分成多個js檔案增加了請求數，那麼就要用到合併壓縮。合併壓縮了原來的許多獨立的js模組，那requirejs又是怎麼衝壓縮的檔案中找到各個獨立的模組進行載入的呢，感覺兩者有點衝突，這個問題想了很久也假想了很多可能。在知乎上找到了乙個...