[gulp] Gulp 使用紀錄

[CityRay]

Install

確認是否安裝過 Gulp

$ npm -g ls --depth=0

Npm Global Install Gulp

$ npm install -g gulp

Usage

Create gulpfile.js

gulp.task('mytask', function () {
    console.log('執行 default 的任務');
});

執行 gulp

$ gulp mytask

plugin

• gulp-header
  Encoding problems with gulp on Windows，中文亂碼問題解決

.pipe(header('\ufeff'))

• gulp-replace
  可運用 regex replace，取代檔案中的指定文字

.pipe(replace(/ReplaceByGulp/ig, 'new text'))

• gulp-rename
  gulp-rename provides simple file renaming methods.
• gulp-bundle-assets
  先創建 bundle.config.js

// bundle.config.js
module.exports = {
  bundle: {
    main: {
      scripts: [
        './content/js/foo.js',
        './content/js/baz.js'
      ],
      styles: './content/**/*.css'
    },
    vendor: {
      scripts: './bower_components/angular/angular.js'
    }
  },
  copy: './content/**/*.{png,svg}'
};

gulp.js 中加入

gulp.task('bundle', function() {
  return gulp.src('./bundle.config.js')
    .pipe(bundle())
    .pipe(gulp.dest('./public'));
});

Reference

• Gulp 基础与原理
• Gulp 基礎入門 - 2017
• gulp 學習筆記
• 前端自動化神器 Gulp
• 精通gulp常用插件
• Gulp 與 Sass 開發環境
• Gulp - 建立 SCSS/SASS 編輯環境
• Gulp 筆記：安裝、撰寫 Task、監看、例外錯誤處理和套件使用
• 解刨gulp中steam pipe的异步并行坑
• 前端自動化：Gulp 學習路程
• 前端团队 Gulp & Webpack 工作流 迁移记
• 六角學院 - Gulp 基本運用與 Bower 之間整合 - youtube