使用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'])