整理筆記：前端工程構建工具gulp篇

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

1、工做原理

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

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

2、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執行的時候默認去找這個文件。

3、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'任務

4、經常使用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任務

5、Glob 匹配文件路徑

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

有點相似於正則表達式，可是語法又有點差別。

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

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

匹配模式詳解：

很接近正則 但不徹底同樣

單匹配模式：

code	匹配	說明
*.*	a.js , b.css	匹配全部帶後綴的文件
*/*/*.js	a/b/c.js，x/y/z.js	匹配固定層級目錄
**	abc，a/b，a/b.js	匹配全部的目錄和文件
js/**/*.js	js/a.js，js/a/b.js	匹配a目錄下的.js文件
a??	a.b，abc	佔位符與字符搭配使用
[abc].js	a.js，b.js，c.js	整個[]只匹配一個字符
[^abc].js [!abc].js	x.js，y.js	除了a.js b.js c.js外的所有js

多匹配模式：

1.類正則

2.數組[ ]

code	匹配說明
[*.js,'!b*.js']	匹配全部js文件，但排除掉以b開頭的js文件
['!b*.js',*.js]	不排除任何文件，由於排除模式不能出如今數組的第一個元素中

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

code	匹配說明
a{b, c}d	展開爲：abc，acd
a{b,}c	展開爲：abc，ac
a{0..3}c	展開爲：a0c，a1c，a2c
a{b, c{d, e}f}g	展開爲：abg，acdfg，acefg
a{b, c}d{e, f}g	展開爲：abdeg，acdeg，abdeg，abdfg

6、經常使用插件

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

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/...