June 14, 2017

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


No comments:

Post a Comment