Grunt壓縮HTML和CSS

標籤：alt   func   設定   壓縮圖片   font   版本   logs   hit   分享   

我的小夥伴們!我明明 在壓縮圖片之前發過一篇,關於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‘            }        }    });    //設定預設任務    grunt.registerTask(‘default‘,[‘cssmin‘,‘htmlmin‘]);}

 然後,Win+r調出命令列.

輸入 grunt 按斷行符號

看到這樣的結果,就成功了!!

懂了嗎?

Grunt壓縮HTML和CSS