一句話:就是自動化,對于需要反復的任務,例如壓縮,編譯,單元測試.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壓縮CSS和HTML的實例交匯處能的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。