Grunt壓縮HTML和CSS

知識 06-13

我的小夥伴們!我明明在壓縮圖片之前發過一篇,關於Grunt壓縮cCSS是和HTML的!但是不知道為什麼,今天再一看.迷之消失了!沒辦法.只好今天在寫一次,從頭開始!首先.我來介紹一下為什麼要用構建工具.讓我來一個官方的回答:

一句話:就是自動化,對於需要反覆的任務,例如壓縮,編譯,單元測試.linting等,自動化工具可以減輕你的勞動,簡化

你的工作.當你在Gruntfile文件確定配置好了任務,任務運行器就會自動幫你或你的小組完成大部分無聊的工作.

下面咱們來快速入門一下:

Grunt和Grunt插件是通過npm安裝並管理的,npm是Node.js的包管理器.所以也就是說,想要安裝Grunt就必須要安裝Node,想要安裝Grunt就必須要安裝Node,想要安裝Grunt就必須要安裝Node重要的事情說三遍! ?(?>?

你需要先將Grunt命令行(cli)安裝到全局環境中.安裝時可能需要使用sudo許可權或者作為管理員來執行以下命令,

上述命令執行完後,Grunt命令就被加入到你的系統路徑中了,以後就可以在任何目錄下執行此命令了.

注意，安裝grunt-cli並不等於安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個系統上同時安裝多個版本的 Grunt。

這樣就能讓多個版本的Grunt同時安裝在同一台機器上了,

同樣,Grunt插件和其他node模塊都可以按相同的方式安裝.下面展示的實例就是安裝htmlmin任務模塊的:

再來一個cssmin任務模塊的:

都弄好之後:咱們就開始敲代碼吧:

module.exports = function(grunt){
//1.引入
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-htmlmin"); //2.設置任務:
grunt.initConfig({
// //壓縮CSS
cssmin:{
yasuo:{
options:{
mangle:false
},
expand: true,
cwd: "css",//壓縮那個文件夾里的文件
src:"*.css",//壓縮那個文件
dest:"yscss",放壓縮後文件的文件夾
ext:".min.css"壓縮後文件的的名字
}
},
// //壓縮HTML
htmlmin:{
options: {
removeComments: true, //移除注釋
removeCommentsFromCDATA: true,//移除來自字元數據的注釋
collapseWhitespace: true,//無用空格
collapseBooleanAttributes: true,//失敗的布爾屬性
removeAttributeQuotes: true,//移除屬性引號有些屬性不可移走引號
removeRedundantAttributes: true,//移除多餘的屬性
useShortDoctype: true,//使用短的跟元素
removeEmptyAttributes: true,//移除空的屬性
removeOptionalTags: true//移除可選附加標籤
},
yasuo:{
expand: true,
cwd: "index",
src: ["*.html"],
dest: "yshtml"
}
}