gulp ,基於 NodeJS 的項目，自動化構建的工具增強你的工作流程！

一、工作原理

前端構建工具，gulp是基於Nodejs，自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

借鑑了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。流，Node將幾乎所有IO操作都抽象成了stream的操作，簡單來説就是：
(1)在面向對象基礎上的一種抽象的處理數據的工具。
(2)通過各種 Transform Stream 來實現文件不斷處理 輸出。

二、gulp安裝引入

1.全局安裝gulp

安裝好node，然後全局安裝gulp。

npm i -g gulp

2.項目中重新安裝並保存到開發依賴：

npm i gulp -D

3.安裝或引用所需的插件

//安裝插件 
npm i gulp gulp-ssh gulp-ftp -D
-------------
//引入差價（有些插件經常用 已裝在全局，就可以直接引入到項目裏）
npm link gulp gulp-ssh gulp-ftp

4.在項目根目錄下創建 gulpfile.js 的文件

gulp執行的時候默認去找這個文件。

三、gulpfile.js 格式

1.加載模塊插件

//**AMD**   require.js 用require()加載模塊 下面例子都用require
var gulp = require('gulp'); 

//**es6中** 用import加載模塊
import gulp from 'gulp'; 

2.編寫任務

var gulp = require('gulp');

gulp.task('default', function() {
  // doSomething
  console.log("開啓默認gulp項目")
});

3.運行任務

示例：在終端輸入 gulp等於輸出gulp default; 就是默認讀取'default'任務

四、常用API

1. task( ) 創建定義任務

task(name,function(){}); 語法參數 (名字,執行函數)

//創建定義名為'build'的任務
gulp.task('build', function() {
  console.log("開啓build任務")
});

2. dest( ) 導出文件到哪

正式描述：創建用於將虛擬對象寫入文件系統的流

var gulp = require('gulp');

gulp.task('save', function(){ 
  return gulp.src('../js/**/*.js') 
    .pipe(gulp.dest('../output/js/')); //寫入到output/js/路徑下
}

//pipe方法傳入一個function接收上一個流（stream）的結果，並返回一個處理後流的結果(返回值應該是一個stream對象)

3. src() 讀取文件

正式描述：src(匹配文件路徑);創建一個流,從文件中讀取虛擬對象

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('uglify', function(){   //新建一個叫uglify的任務
    return gulp.src('../js/**/*.js')    //js項目下全部的js文件
        .pipe(uglify())                     //對流進行壓縮
        .pipe(gulp.dest('../output/js/'));  //寫入到output/js/路徑下
});

4.watch( )監視文件,文件發生變化執行任務

watch(globs, [options], [task]); 監聽文件路徑，配置選項，執行任務

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle: 'compressed'           // 配置輸出方式,默認為nested
    }))
    .pipe(gulp.dest('./dist/css'));

gulp.watch('./sass/**/*.scss', ['sass']);   // 實時監聽sass文件變動,執行sass任務

五、Glob 匹配文件路徑

Glob 是由普通字符和/或通配字符組成的字符串，用於匹配文件路徑。可以利用一個或多個 glob 在文件系統中定位文件。

有點類似於正則表達式，但是語法又有點差異。

這種模式，被廣泛用於命令行、Shell 等場景，大家熟悉的.gitignore文件也是使用這種模式。各大語言都有對於 Glob 的實現，例如 Go 和 PHP 的Glob函數，Python 中的glob模塊。 而 NodeJS 的實現是minimatch, 而在 Gulp 源碼中，就用了對 minimatch 進行封裝的node-glob模塊。

Gulp的gulp.watch和gulp.src都有用到 Glob 來匹配對應的路徑和文件。

匹配模式詳解：

很接近正則 但不完全一樣

單匹配模式：

多匹配模式：

1.類正則

2.數組[ ]

3.展開模式{ }
正則裏面我們用{}裝載量詞， 而這裏是表示展開模式。

六、常用插件

進入官網 搜索插件名字後都有詳細的配置説明和示例

del //刪除文件

var del = require('del');
del('./dist');// 刪除整個dist文件夾

gulp-rename //文件重命名

var gulp = require('gulp');
var rename = require("gulp-rename");

gulp.src('./hello.txt')
  .pipe(rename('gb/goodbye.md'))    // 直接修改文件名和路徑
  .pipe(gulp.dest('./dist')); 

gulp.src('./hello.txt')
  .pipe(rename({
    dirname: "text",      // 路徑名
    basename: "goodbye",  // 主文件名
    prefix: "pre-",       // 前綴
    suffix: "-min",       // 後綴
    extname: ".html"      // 擴展名
  }))
  .pipe(gulp.dest('./dist'));

gulp-concat //合併文件

var concat = require('gulp-concat');

gulp.src('./js/*.js')
    .pipe(concat('all.js'))         // 合併all.js文件
    .pipe(gulp.dest('./dist'));

gulp.src(['./js/demo1.js','./js/demo2.js','./js/demo2.js'])
    .pipe(concat('all.js'))         // 按照[]裏的順序合併文件
    .pipe(gulp.dest('./dist'));

fs //nodejs 的fs模塊

因為是node自帶的模塊 不需要另外安裝。
列舉兩個是冰山一角，可以點鏈接去官網看

var fs =require("fs");

// 寫入文件    
fs.writeFile(file, data[, options], callback)
//讀取文件
fs.readFile(path[, options], callback)

//-----------任務--------------

gulp-sequence //按順序執行一系列任務

var gulpSequence= require('gulp-sequence');

//並行執行任務a和任務b, 在a和b都結束後才執行c
gulp.task('sequence-1', gulpSequence(['a', 'b'], 'c'))

//執行單個任務
gulp.task('sequence-1', gulpSequence('a')

readable-stream //可讀流

gulp-uglify //文件壓縮

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
 
gulp.task('compress', function () {
  return pipeline(
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
  );
});

gulp-imagemin //壓縮圖片

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
 
exports.default = () => (
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
);

gulp-less   // less編譯

gulp-cssmin   // css壓縮

gulp-autoprefixer  //前綴補充

var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var autoprefixer=require('gulp-autoprefixer');

gulp.task('cssmin', function(){
    return gulp.src('../less/'+ lessFile +'.less')
        .pipe(less())
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cssmin())
        .pipe(gulp.dest('../css/'));
})

gulp-livereload  // 熱更新

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
 
gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp-rename  //重命名 例如a.txt 改 b.js

var rename = require("gulp-rename");
 
gulp.src("./src/main/text/a.txt")
  .pipe(rename("main/text/ciao/b.js"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

gulp-live-server  //起服務

gulp-sourcemaps //顯示源碼

mark一下 僅供參考 歡迎更正補充 Thanks

參考資料：
官網: https://www.gulpjs.com.cn/
官網插件使用: https://www.npmjs.com/
博客類：
gulp及其插件: https://www.jianshu.com/p/a9e...
常用gulp插件: https://www.cnblogs.com/nanxi...
插件編寫入門: https://www.cnblogs.com/chyin...
gulp的基礎和原理：http://huang-jerryc.com/2017/...