Gulp 入門


Posted by Nicolakacha on 2020-09-09

Gulp 是一套 Task Mananger 任務管理器,可以用來管理工作流程的每項任務:

如何使用

先用 npm 安裝

npm install --global gulp-cli

在專案資料夾執行 npm 初始化

npm init

在專案資料夾內安裝 gulp package:

npm install --save-dev gulp

在資料夾內建立 gulpfile.js 檔案:

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

在終端機執行測試,就可以看到測試結果:

gulp

src & dest

引入 gulp 內建的 API:src 和 dest

src 是檔案來源,dest 是目標位置,下面那段程式碼的意思就是把檔案從 src 複製到 dist,這就是最基本的 gulp 用法:

const { src, dest } = require('gulp');

function defaultTask(cb) {
  return src('src/test.js')
    .pipe(dest('dist'));
}

exports.default = defaultTask;

接下來會介紹各種常用的 plugin,在 src 和 dest 之間加入這些 plugin,可以幫助我們完成工作流程。

使用 plugin

使用 plugin 的方法都是先安裝:

npm install --save-dev gulp-babel

再引入至 gulpfile.js 內:

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

接著查看文件看如果加入 task 裡面,以下會簡介常用的幾個 plugins,如何安裝及引入各個 plugin 就不再贅述~

gulp-babel

gulp-babel 就是再 gulp 任務管理器內執行 babel 轉換語法的 plugin。

下列程式碼是將 babel() 加入我們的 task 流程:

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

function defaultTask() {
  return src('src/test.js')
        .pipe(babel({
            presets: ['@babel/env']
            //如果有設定過 .babelrc 就不用在放參數
        }))
    .pipe(dest('dist'));
}

exports.default = defaultTask;

gulp-uglify

gulp-uglify 可以針對 JavaScript 檔案進行壓縮與最小化。

下列程式碼是將 uglify 加入我們的 task 流程:

const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

function defaultTask() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist'));
}

gulp-rename

經過 uglify 的 JavaScript 檔案,通常會命名成 .min.js 以做為區別,所以可以再引入 rename 套件。

將 rename 加入 task 流程:

const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

function defaultTask() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
    .pipe(dest('dist'));
}

經過 uglify 的檔案會被壓縮成一行,變數會被簡化,可以減少檔案大小:

gulp-sass

gulp-sass 套件可將 sass 轉換成 css。

將 gulp-sass 加入 task 流程:

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

function defaultTask() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'));
}

exports.default = defaultTask;

gulp-clean-css

gulp-clean-css 類似 minify js 對 JavaScript 在做的事,可以把 css 檔案壓縮。

將 clean-css 加入流程,設定 sass 的編譯器,同時也加入 rename 這個 plugin,讓編譯完的 css 重新命名為 min.css。

做兩次 dest(),編譯完 sass 先複製一次,變成 min.css 後再複製一次,這樣資料夾內就同時又被壓縮前和被壓縮後的檔案:

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))
}

gulp-imagemin

gulp-imagemin 可將圖片檔案壓縮變小:

const { src, dest, series, parallel, watch } = require('gulp');
const imgMin = require('gulp-imagemin');

function minifyImg() {
  return src('src/img/*')
    .pipe(imgMin())
    .pipe(dest('lib/img'))
}

exports.default= minifyImg;

series & parallel

const { src, dest, series} = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist'));
}

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))

}
exports.default = series(compileCSS, compileJS);
// 引入 series,按順序執行 compileCSS 和 compileJS 兩個任務
exports.default = parallel(compileCSS, compileJS);
// 引入 parallel,同時執行 compileCSS 和 compileJS 兩個任務
exports.compileCSS = compileCSS
// 執行單個任務

使用 watch() 監控檔案並自動執行編譯

使用 gulp 內建的 API watch(),在檔案每次被改動的時候自動執行 gulp 工作流程,例如我們可以在 SCSS 檔案被更改的時候,自動執行 complieCSS 這個 task,就不需要每次都要手動執行流程。

但要注意的是,使用 watch() 的 task 不能是同步的,如果是同步的任務,將無法確認 task 的完成情況,task 將不會再次運行。

const { src, dest, series, parallel, watch } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist'));
}

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))
}

exports.default = function() {
  watch('src/*', series(compileCSS, compileJS)); 
}

補充資料:
Gulp 4.0 Tutorial 2020 | Concat & Minify Your CSS and JS


#gulp







Related Posts

[11] 型別 - undefined、undeclared、依存注入

[11] 型別 - undefined、undeclared、依存注入

【Day01】用tkinter製作圖形視窗介面(GUI)

【Day01】用tkinter製作圖形視窗介面(GUI)

MySQL Group Replication 實作

MySQL Group Replication 實作


Comments