gulp 學習筆記

基本寫法

• 給定一個任務
  • {name} 是這個任務的名字

gulp.task("{name}", function() {});

• 來源檔
  • {file_path} 是檔案路徑
  • gulp.src('./source/*.jade') 只有 source 的兒子會進行編譯
  • gulp.src('./source/**/*.jade') source 的兒子、孫子都會進行編譯

gulp.task("{name}", function() {
  gulp.src("{file_path}");
});

• 做一些處理
  • 利用 pipe，pipe 就像一個水管一樣，會將這一層的輸出作為下一層的輸入
  • 可以編譯、合併、壓縮

gulp.task("{name}", function() {
  gulp
    .src("{file_path}")
    .pipe(/* 做一些事 */)
    .pipe(/* 做一些事 */);
});

• 輸出位置
  • {output_file_path} 是輸出檔案路徑

gulp.task("{name}", function() {
  gulp
    .src("{file_path}")
    .pipe(/* 做一些事 */)
    .pipe(/* 做一些事 */)
    .pipe(gulp.dest("{output_file_path}"));
});

監控資料改變

• watch 監控資料來源，當資料異動時，可以執行特定的任務
  • {source} 資料來源
  • {task} 執行的任務
  • 可以放多個任務
  • 3.9 版本好像無法監控「新增」、「刪除」的檔案異動，必須要重啟 gulp 才可以繼續監控

gulp.task("{name}", function() {
  gulp.watch({ source }, [{ task }]);
});

預設任務

• 在命令列直接下 gulp 會執行名為 default 的任務
• {task} 執行的任務
• 可以放多個任務

gulp.task("default", [{ task1 }, { task2 }]);

常用套件

gulp-jade

• HTML 樣板語言

gulp-sass

• 強大的 CSS 預處理器

gulp-plumber

• 讓 Gulp 在運行的過程中遇錯不會中斷

gulp-postcss

• 強大的 CSS 後處理器

autoprefixer

• 自動為你的 CSS 補上前綴詞
• 搭配 gulp-postcss

gulp-load-plugins

• 簡化 gulp 載入流程
• gulp 開頭的套件，可以不用引入，變數用 $. 來代替

gulp-babel

• JavaScript ES6 編譯工具
• 搭配 babel-preset-es2015

babel-preset-es2015

• JavaScript ES6 編譯工具

gulp-sourcemaps

• 標示壓縮、合併程式碼的原始位置

gulp-concat

• 合併串接程式碼

Browser Sync

• 前端愛用的 Web Server
• 包含 Livereload https://browsersync.io/docs

main-bower-files

• Bower 工具

gulp-clean-css

• CSS 壓縮工具

gulp-uglify

• JavaScript 壓縮工具

minimist

• 將指令碼匯入 gulp 流程

gulp-clean

• 清空資料夾

gulp-sequence

• 設定 task 的執行順序

gulp-imagemin

• 圖片壓縮

開發/發布模式

• 根據不同環境進行壓縮或其他處理

  var gulp = require("gulp");
  var sass = require("gulp-sass");
  var cleanCSS = require("gulp-clean-css");
  var gulpif = require("gulp-if");
  var minimist = require("minimist");
  
  var envOptions = {
    string: "evn",
    default: { evn: "develop" },
  };
  var options = minimist(process.argv.slice(2), envOptions);
  
  gulp.task("sass", function() {
    gulp
      .src("./src/scss/**/*.scss")
      .pipe(sass.on("error", sass.logError))
      .pipe(gulpif(options.env === "production", cleanCSS()))
      .pipe(gulp.dest("./public/css"));
  });
  

  • develop

  $ gulp sass --env=production
  

  • production

  $ gulp sass
  

• 打包

  var gulp = require("gulp");
  var clean = require("gulp-clean");
  var gulpSequence = require("gulp-sequence");
  
  gulp.task("clean", function() {
    return gulp.src("./public", { read: false }).pipe(clean());
  });
  
  gulp.task("a", function(cb) {
    //... cb()
  });
  
  gulp.task("b", function(cb) {
    //... cb()
  });
  
  gulp.task("c", function(cb) {
    //... cb()
  });
  
  gulp.task("build", gulpSequence(["clean", "a", "b", "c"]));
  

  • 和搭配上面的 env production

  $ gulp build --env=production