Frontend Intermediate Course - 作業九直播筆記

這次作業胡立老師給了「做得很好，gulpfile 很完整」的評價之外，還得到《值得參考》的榮譽標籤！(*´▽`*) 太開心了～～

胡立老師的直播：
9. 節省 Request 的極致：一為全，全為一

以下是看直播的一些筆記。

1. gulp.task 的用法。

gulp.task('default', function () {
  // do something...
});

在 gulp.task 裡面的 'default' 是每次執行 Gulp 會執行的程式碼，如果命名成自訂名稱，譬如說 'hello' 的話：

gulp.task('hello', function () {
  // do something...
});

那在執行 Gulp 的時候要指定執行 'hello'，否則 Gulp 會回應找不到 'default' 裡的程式碼。

胡立老師是用 Mac，而我用的是 Windows。Windows 的 command line 的指令跟 Mac 的 terminal 不一樣，所以我照胡立老師的示範去執行沒辦法成功，還要再研究。不過也可以寫成：

gulp.task('default', ['hello']);

這樣直接執行 Gulp 就會執行到 'hello' 裡面的程式碼了。

2. 整理資料夾。
這個部分我在 Webpack 作業的時候就有大整理過了，輸入跟輸出的檔案要分別放在不同的資料夾，然後在 webpack.config.js 跟 gulpfile.js 裡面要寫相對路徑時，也要考慮這兩個檔案的位置去寫路徑。

3. CSS 跟 JavaScript 輸出的檔案命名。
一般有經過 minify 或 uglify 處理過的檔案，命名上為了跟原本的檔案做區分，都會加上 .min。CSS 檔案如果原本是 style.css 就改成 style.min.css，JavaScript 檔案如果原本是 app.js 就改成 app.min.js。這類的檔案通常是給瀏覽器讀取的，檔案大小比較小，但不容易給人類讀懂，所以人 debug 時會用原本沒有 .min 的檔案。

4. Webpack uglifyJS plugin 的問題。
這點我在上篇作業筆記中有補充，似乎很多同學也都遇到一樣的問題，應該是 Webpack uglifyJS plugin 存在的無法讀取 ES6 語法問題，胡立老師在直播中也是遇到無法用 Webpack uglifyJS plugin 將 JavaScript 檔案 uglify（即使已經用 Babel-loader 先編譯 ES6 語法）。後來解決方法是用 Gulp-minify 去 minify JavaScript 檔案，Gulp-webpack 就讓它只處理打包所有 JavaScript 檔案成 bundle.js 而已。

這次直播筆記大概是這樣，因為上一篇已經寫得又臭又長了，我有點發懶（也是真的沒有其他東西要寫了啦，真的） XD

下一次的作業也是最後一次的作業了，是要修改自己寫程式的壞習慣，如果之前寫程式有很多壞習慣，就要改很久～ orz