基於grunt的前端構建

在「grunt的初次使用」的基礎上，這一篇繼續對grunt進行探索研究。這一次再也不使用php進行include靜態文件，而是在html裏面引入。而後主要將grunt用於兩個大的方向，一個是用於開發期間，一個用於上線前期打包。使用到的插件可能有些更換。具體目錄以下，src目錄用於開發與維護，dist目錄是打包後的項目，用於上線：

├─ dist/
    ├─ css/
    ├─ images/
    ├─ js/
    └─ view/
└─ src/
    ├─ css/
    ├─ images/
    ├─ js/
    ├─ sass/
    └─ view/

 

在開發期間，使用到的grunt插件以下，watch插件用了監聽文件，一旦文件被修改，可讓它觸發瀏覽器自動刷新：

"devDependencies": {
  "grunt": "^0.4.5",
  "grunt-contrib-jshint": "^0.12.0",
  "grunt-contrib-sass": "^0.9.2",
  "grunt-contrib-watch": "^0.6.1"
}

圖片不須要壓縮，css使用sass編譯，js使用了requirejs，並使用jshint進行檢錯。其中sass編譯好後會在同一目錄下生成對應的css目錄與文件。jshint的具體配置參考「例子」。

sass: {
  dev: {
    options: {
      style: 'expanded'
    },
    files: [{
      expand: true,
      cwd: 'src/sass/',
      src: ['**/*.scss'],
      dest: 'src/css/',
      ext: '.css'
    }]
  }
},

jshint: {
  options: {
    curly: true,
    newcap: true,
    eqeqeq: true
    // ...
  },
  files: {
    src: ['Gruntfile.js', 'src/**/*.js']
  }
}

 

在開發結束後，接下來就是讓項目上線了，因而就有了打包項目的過程。看過張雲龍博客裏講的「大公司裏怎樣開發和部署前端代碼？」，因而便有了非覆蓋式發佈和靜態文件hash，用到了「grunt-filerev」和「grunt-usemin」這兩個插件。網上有不少教程都是圖片、css、js文件同一時間進行hash，但我以爲這樣不妥，畢竟css(js)代碼裏引用到了圖片，得先圖片進行hash後替換了css(js)裏引用的路徑，而後再對css(js)進行hash才能保證哪些文件是修改過的。

 

打包分四個步驟。按順序分別是圖片的打包、css文件的打包、js文件的打包、html文件的打包。使用到的插件以下：

"devDependencies": {
  "grunt": "^0.4.5",
  "grunt-contrib-clean": "^0.7.0",
  "grunt-contrib-copy": "^0.8.2",
  "grunt-contrib-cssmin": "^0.14.0",
  "grunt-contrib-htmlmin": "^0.6.0",
  "grunt-contrib-imagemin": "^1.0.0",
  "grunt-contrib-jshint": "^0.12.0",
  "grunt-contrib-requirejs": "^0.4.4",
  "grunt-contrib-sass": "^0.9.2",
  "grunt-contrib-watch": "^0.6.1",
  "grunt-css-sprite": "^0.2.2",
  "grunt-filerev": "^2.3.1",
  "grunt-include-replace": "^3.2.0",
  "grunt-newer": "^1.1.1",
  "grunt-replace": "^0.11.0",
  "grunt-usemin": "^3.1.1",
  "load-grunt-tasks": "^3.3.0",
  "time-grunt": "^1.2.1"
}

 

首先得將dist目錄給刪除掉，由於是非覆蓋式部署，因此刪掉一些過時用不到的靜態文件。第一個步驟是圖片打包，將須要合併的圖片合併了（並修改對應的css文件）放置於臨時目錄（tmp），不須要合併的圖片則複製粘貼到臨時目錄（tmp）。而後對臨時目錄裏的圖片進行壓縮，最後hash後放置於dist生產環境目錄。

// 步驟一：對圖片進行打包
grunt.registerTask('img', [
  'clean:dist',
  'sprite',
  'copy:images',
  'imagemin',
  'filerev:img'
]);

 

第二個步驟是css文件的打包，先用sass將css壓縮到臨時目錄(tmp)中，接着用usemin替換掉裏面的已經hash的圖片資源，最後將css文件進行hash後放置於dist生產環境目錄。

// 步驟二：對css進行打包
grunt.registerTask('css', [
  'sass:dist',
  'usemin:css',
  'filerev:css'
]);

 

第三個步驟是js文件的打包，用的是requirejs插件將js文件合併壓縮到臨時目錄(tmp)，而後替換掉文件裏的圖片資源路徑，最後hash到生產環境目錄（dist），並把不須要hash的第三方庫複製到dist生產環境目錄。

// 步驟三：對js進行打包
grunt.registerTask('js', [
  'requirejs',
  'usemin:js',
  'filerev:js',
  'copy:js'
]);

 

第四個步驟則是html文件的打包，先用grunt-replace把裏面的php include替換成特定的模式放置於臨時目錄(tmp)，而後再用grunt-include-replace把html依賴的html片斷複製粘貼到一個html中，緊接着替換到html中的已hash的靜態文件（包括css，js，image），最後將html壓縮至dist目錄下。

// 步驟四：對html進行打包
grunt.registerTask('html', [
  'replace:before',
  'includereplace',
  'usemin:html',
  'replace:after',
  'htmlmin',
  'clean:tmp'
]);

 

最後若是你想問我爲何上面的四個步驟不直接寫成一個task呢，我也無能爲力。我試過寫成一個task，後果則是文件裏的圖片資源路徑沒可以替換成功，多是在一個task內usemin插件沒法執行屢次，因而我就分類寫成四個了。 最後總結一下，以上的方式的好處就在於開發時期不須要去合併壓縮文件，方便調試。而生產環境則是儘量去合併壓縮，減小用戶的請求時間。