首頁 > web前端 > js教程 > 主體

Grunt針對靜態檔案的壓縮,版本控制打包詳解

小云云
發布: 2018-01-31 13:24:08
原創
1722 人瀏覽過

本文主要為大家帶來一個Grunt針對靜態檔案的壓縮,版本控制打包的實例講解。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

在講之前先談談大致步驟:安裝nodejs -> 全域安裝grunt -> 專案建立package.json --> 專案安裝grunt以及grunt外掛程式->設定Gruntfile.js ->執行任務

1.安裝Node

我們開始之前需要安裝Nodejs,如果沒有安裝的傳送門

安裝好了之後,查看是否安裝成功,正常是這樣的提示

#這裡建議npm換成淘寶的cnpm ,速度槓槓的。

安裝指令:

npm install cnpm -g -registry=https://registry.npm.taobao.org

#2.安裝全域Grunt

#安裝指令:

##cnpm install grunt -g

3.專案建立package.json

在專案根目錄下建立package .json文件,文件內容如下

4.專案安裝grunt以及grunt外掛

我們所需的外掛

grunt-contrib-clean#清空檔案與資料夾https://github.com/gruntjs/grunt-contrib-cleangrunt-contrib-copy複製檔案與資料夾https://github.com/gruntjs/grunt-contrib-copy#grunt-contrib-concat連接、合併檔案(沒用到)https://github.com/gruntjs/grunt-contrib-concatgrunt-contrib-cssmin(CSS檔案)壓縮https://github.com/gruntjs/grunt-contrib-cssmingrunt-contrib-uglify(JS檔)壓縮https://github.com/gruntjs/grunt-contrib-uglifygrunt-filerev檔案內容hash(MD5)(版本編號控制)https://github.com/yeoman/grunt-filerevgrunt-usemin檔案進行引用修改https://github.com/yeoman/grunt-useminload-grunt-tasksoad-grunt-taskshttps://github.com/sindresorhus/load-grunt-tasks
外掛名稱 說明 #Github位址
## ##

我們打開我們的專案資料夾,在路徑列中輸入cmd然後回車

#回車後的介面

#打開命令列視窗之後,我們輸入安裝命令:

cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt- contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev

5.配置Gruntfile.js (這是重點,重點,重點。重要的事情說三遍。)

先貼我的配置,後面慢慢說明


module.exports = function (grunt) {
 require('load-grunt-tasks')(grunt);

 var path = {
  src : 'test',
  dest : 'dist',
 }

 grunt.initConfig({
  path : path,
  clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },
  filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;, 
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },
  useminPrepare : {//声明concat、cssmin、uglify
   build : {
    files : [{     
      src : &#39;<%= path.src %>/page/*.html&#39;
     }
    ],
    
   }
  },
  usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },
  copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*,匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css,匹配src下面所有css文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js,匹配src下面所有js文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
 });
 grunt.registerTask(&#39;default&#39;, [&#39;clean:beforebuild&#39;, &#39;copy&#39;, &#39;cssmin&#39;, &#39;uglify&#39;,&#39;filerev&#39;, &#39;usemin&#39;]);
};
登入後複製

我們前面一直都在安裝這個安裝那個,但是安裝的這些東西怎麼用起來了?

首先我們透過學習 grunt入門 了解到外掛程式如何使用,這是官網的例子。

pkg是透過讀取package.json產生的json物件。

uglify是grunt-contrib-uglify 指定的任務名,每個外掛都有對應的任務名可以在對應的github裡面查看

#grunt.loadNpmTasks('grunt-contrib-uglify'); 從字面上就可以看出來/,載入能夠提供"uglify"任務的插件。

grunt.registerTask('default', ['uglify']); 註冊別名任務,這個別名任務對應的是一個任務清單

當透過grunt 別名時,實際上是執行清單裡的任務,並且依序執行

這些基本的資訊都可以透過官網查看。

我們來說說我們需求,我們需要對靜態檔案打包壓縮,並且需要對靜態檔案加入版本號而且所有引用靜態檔案的html或css都得修改檔案名,我們的需求明確後來看看我們怎麼做。

第一步:我們需要重新打包,那就需要複製文件,所以我們需要grunt-contrib-copy插件。

在copy之前我們先要確定原始檔案和目標文件,我這裡原始檔案都放在test資料夾中,目標檔案都放在dist資料夾中

#我們建立檔案路徑


var path = {
  src : &#39;test&#39;,
  dest : &#39;dist&#39;,
 }
登入後複製

檔案路徑建立好了,我們來看copy


copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*,匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
登入後複製

從程式碼的註解就可以看出一二了。這裡說下cwd,src,dest 。

其實這裡的來源路徑是 cwd + src。這才是真正的源路徑。 dest是目標路徑前綴。

我這裡的意思是src下面所有的文件,意思就是把 src資料夾 裡面的文件複製到 dest資料夾 裡。這裡可以指定需要複製的特定資料夾或檔案類型

第二步:進行檔案壓縮,我這裡只是針對js和css壓縮,對img的壓縮可以查看對應的插件,思路都一樣。

css壓縮需要用到grunt-contrib-cssmin 插件,該插件對應的任務名為cssmin


cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css,匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
登入後複製

js 壓縮需要用到grunt-contrib -uglify 插件,該插件對應的任務名為uglify


uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js,匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
登入後複製

第三步:靜態檔案重命名,我們這裡的版本控制是透過對靜態檔案重新命名來現實的。

重新命名需要用到grunt-filerev 插件,該插件對應的任務名為filerev


#
filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;, 
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },
登入後複製

這裡只有一個src參數,傳的是數組,我們這裡只想為css和js重命名,其他檔案不需要。所以數組第一個參數src/** 匹配src資料夾中所有文件,後面兩個! xx,是排除的意思,

第四步:修改html中css和js的引用

修改檔案引用需要用到grunt-usemin 插件,該插件對應的任務名為usemin


#
usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },
登入後複製

這裡也只有一個src參數,給的是html的位址,如果你還有css 可以這樣寫


usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   },
   css :{
    files : [{
      src : &#39;<%= path.dest %>/css/*.css&#39;
     }
    ]
   }
  },
登入後複製

第五步:我們從複製,壓縮,重命名,修改引用都說了一遍,這裡還少一個東西,就是我們每次複製之前需要把目標資料夾裡面的檔案刪除掉。

修改檔案參考需要用到grunt-contrib-clean 插件,該插件對應的任務名為clean


clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },
登入後複製

這裡也只有一個src參數,給出目標資料夾的位址。

所有任務到這裡就結算了。

我們註冊任務別


#
grunt.registerTask(&#39;default&#39;, [&#39;clean:beforebuild&#39;, &#39;copy&#39;, &#39;cssmin&#39;, &#39;uglify&#39;,&#39;filerev&#39;, &#39;usemin&#39;]);
登入後複製

可以看到,我们这里只是注册了任务,并没有应用插件。我们添加插件是听过 load-grunt-tasks 插件完成的


require(&#39;load-grunt-tasks&#39;)(grunt);
登入後複製

这里指令相当于我们一个个写


grunt.loadNpmTasks(&#39;xxx&#39;);
登入後複製

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点:

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点:

这种写法是动态构建文件对象

这种写法是文件数组格式 

相关推荐:

什么是Grunt?对他的详细介绍

关于Grunt压缩CSS和HTML的实例交汇处能

Grunt压缩图片和JS实例详解

以上是Grunt針對靜態檔案的壓縮,版本控制打包詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!