使用gulp構建自動化工作流

• 簡單易用
• 高效構建
• 高質量的生態圈

可能很多人會說現在提gulp也太落后了吧，但我想說寫點東西並不是為了討論它是否過時，而是來幫助我們自己來記憶、整理和學習。任何工具，我需要，我才去使用它，正如此時我需要gulp一樣。

為了效率而使用工具

安裝

• 全局安裝 gulp命令：

$ npm install --global gulp-cli

• 作為項目的開發依賴（devDependencie）安裝：

$ npm install --save-dev gulp

創建配置文件

在項目根目錄下創建一個名為 gulpfile.js 的文件:

touch gulpfile.js

API

• gulp.src(globs[, options])

  讀取目標源文件

• gulp.dest(path[, options])

  向目標路徑輸出結果

• gulp.pipe()

  將目標文件通過插件處理

• gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

  監視文件系統，並且可以在文件發生改動時候做一些事情

• gulp.task(name[, deps], fn): 任務

  定義一個gulp任務

使用

當配置完gulp.file后運行 gulp：

$ gulp

常用工具插件

• gulp-sass

  sass/scss編譯

• gulp-eslint

  js代碼校對

• gulp.spritesmith

  生成sprite雪碧圖

• gulp-connect

  本地起一個websocket服務，實時刷新瀏覽器

• gulp-changed

  1. 不浪費寶貴的時間處理沒有改動的文件.gulp-changed會首先把文件進行比對，如果文件沒有改動，則跳過后續任務，。
  2. 默認情況下，gulp只能檢測流中的文件是否更改。gulp-changed的對比功能更加強大，比如可以知道導入/依賴的文件是否更改。

• http-proxy-middleware
  路由代理中間件

示例

以下是我的gulp文件，僅供交流。

'use strict';
const gulp = require("gulp");

/**
 * [sass sass/scss編譯]
 */
const sass = require("gulp-sass");

/**
 * [eslint js代碼檢測]
 */
const eslint = require('gulp-eslint');

/**
 * [connect 本地起一個websocket服務，實時刷新瀏覽器]
 */
const connect = require('gulp-connect');

/**
 * [changed 比較文件變動]
 * 默認情況下，gulp只能檢測流中的文件是否更改。
 * 如果您需要更高級的東西，比如知道導入/依賴的文件是否更改，則可以使用該插件。
 */
const changed = require('gulp-changed');

/**
 * [spritesmith 合並成雪碧圖]
 */
const spritesmith= ("gulp.spritesmith");

/**
 * [proxy 中間代理件]
 */
const proxy = require('http-proxy-middleware');

let Pathconfig = {
    sassCompilePath: __dirname + "/scss/**/*.scss", //需要編譯的scss文件路徑
    sassDestPath: __dirname + "/css/",  //編譯后的scss文件存放處
    htmlSrcPath: __dirname + "/html/*.html", //監控的html路徑
    jsSrcPath: __dirname + "/js/*.js",  //監控的js文件路徑
}

// html任務
gulp.task("html",function(){
    gulp.src(Pathconfig.htmlSrcPath)
    .pipe(connect.reload());
})

// 樣式任務
gulp.task("stylus",function(){
    gulp.src(Pathconfig.sassCompilePath)
        .pipe(changed(Pathconfig.sassDestPath))
        .pipe(sass())
        .pipe(gulp.dest(Pathconfig.sassDestPath))
        .pipe(connect.reload());
})

// js任務
gulp.task("js",function(){
    gulp.src([Pathconfig.jsSrcPath,'!node_modules/**'])
        .pipe(eslint())
        .pipe(eslint.formatEach('compact', process.stderr))
        .pipe(connect.reload());
})

// 監控變動
gulp.task("watch",function(){
    gulp.watch([Pathconfig.htmlSrcPath], ['html']);
    gulp.watch([Pathconfig.sassCompilePath], ['stylus']);
    gulp.watch([Pathconfig.jsSrcPath], ['js']);
})

//定義livereload任務，起一個本地服務
gulp.task('connect',function () {
    connect.server({
        root: __dirname,
        port: 8000,
        livereload: true
    });
});


gulp.task("default",['connect','watch'])