gulp的基本使用

1、gulp官網(wǎng)
2、gulp的使用以及Gulp新手入門教程
3、gulp構(gòu)建項目系列文章
4、--------重要------【微信小程序】- 用Gulp搭建微信小程序項目

一、基本使用

1、dev環(huán)境安裝gulp
npm install --save-dev gulp
或者指定版本配置

"devDependencies": {
  "gulp": "^4.0.2"
},

2、創(chuàng)建gulpfile.js文件，執(zhí)行g(shù)ulp命令是會查找該文件運行

function defaultTask(cb) {
    console.log('----------------啟動gulp任務----------------');
    // place code for your default task here
    cb();
}
exports.default = defaultTask;

3、創(chuàng)建運行命令， gulp默認執(zhí)行 gulpfile.js 的exports.default命令

"scripts": {
  "gulpTest": "gulp"
},

最終效果

image.png

4、執(zhí)行命令
npm run gulpTest

image.png

二、任務

1、task() - 方法用來將函數(shù)注冊為任務
2、series() - 讓task任務按順序執(zhí)行
3、parallel() - 以最大并發(fā)運行任務tasks

舊版 gulp.task(name[, deps], fn) 方法用來將函數(shù)注冊為任務（task）。該 API 依舊可以使用，但是 導出（export）將會是主要的注冊機制

image

1、package.json文件修改gulpTset命令為

"scripts": {
  "gulpTest": "gulp dev"
},

2、gulpfile.js創(chuàng)建dev任務

const { task, series, parallel } = require('gulp');
function clean(cb) {
    console.log('---------clean任務---------');
    cb();
}
function css(cb) {
    console.log('---------css任務---------');
    cb();
}
function javascript(cb) {
    console.log('---------javascript任務---------');
    cb();
}

exports.dev = series(clean, parallel(css, javascript));
// exports等價于task
// task('dev', series(clean, parallel(css, javascript)));

3、執(zhí)行npm run gulpTest

image.png

三、異步執(zhí)行

當從任務（task）中返回 stream、promise、event emitter、child process 或 observable 時，成功或錯誤值將通知 gulp 是否繼續(xù)執(zhí)行或結(jié)束。如果任務（task）出錯，gulp 將立即結(jié)束執(zhí)行并顯示該錯誤。

當使用 series() 組合多個任務（task）時，任何一個任務（task）的錯誤將導致整個任務組合結(jié)束，并且不會進一步執(zhí)行其他任務。當使用 parallel() 組合多個任務（task）時，一個任務的錯誤將結(jié)束整個任務組合的結(jié)束，但是其他并行的任務（task）可能會執(zhí)行完，也可能沒有執(zhí)行完。

四、處理文件

1、src(glob參數(shù) [,options]) - 讀取文件生成一個流（stream）
注意：

1. globs是字符串或數(shù)組，表示待處理文件的路徑，注意該路徑相對于gulpfile.js所在位置

2. globs寫法中，“app/**/*.js”表示app目錄下的任意子目錄下的后綴為js的所有文件

3. options配置中最常用的是base:'文件路徑'，指定與不指定base的區(qū)別在于處理后的文件的位置。請看下圖：寫了base 會只刪掉client保留了js

   image

2、pipe() - 用于連接轉(zhuǎn)換流或可寫流

3、dest(輸出路徑path [,options]) -
接受一個輸出目錄作為參數(shù)，當接收到管道（pipeline）傳輸?shù)奈募r，將文件內(nèi)容及文件屬性寫入到指定的目錄中
1、path可以是路徑字符串或函數(shù)，當是函數(shù)時，該函數(shù)必須返回字符串
2、options可配置cwd和mode，用得不多

PS:大多數(shù)情況下，利用 .pipe() 方法將插件放置在 src() 和 dest() 之間，并轉(zhuǎn)換流（stream）中的文件

四、Glob 詳解

1、glob 是由普通字符和/或通配字符組成的字符串，用于匹配[文件路徑]，可以利用一個或多個 glob 在文件系統(tǒng)中定位文件
2、globs是字符串或數(shù)組，表示待處理文件的路徑，注意該路徑相對于gulpfile.js所在位置

*.js ：在一個字符串匹配任意數(shù)量的字符,用于匹配【單級目錄】下的文件

例子：*.js
能夠匹配類似 單級index.js，但不能匹配 scripts/index.js 或 scripts/nested/index.js

**/*.js ：匹配當前目錄及其子目錄下的所有js文件, 用于匹配【嵌套目錄】下的文件

例子：scripts/**/*.js
被適當?shù)叵拗圃?scripts/ 目錄下。它將匹配類似 scripts/index.js、scripts/nested/index.js 和 scripts/nested/twice/index.js

! (取反)
取反必須跟在一個非取反的 glob 后面。第一個 glob 匹配到一組匹配項，然后后面的取反 glob 刪除這些匹配項中的一部分

例子：
['script/**/*.js', '!scripts/vendor/']
['**/*.js', '!node_modules/']

*.+(scss|sass) ：+號后面會跟著圓括號，里面的元素用|分割，匹配多個選項。這里將匹配scss和sass文件

五、文件監(jiān)控

1、gulp.watch的兩種使用方法
2、使用插件gulp-watch監(jiān)聽-不建議，應該使用新的，可以參考

watch()將globs 與 任務（task）進行關(guān)聯(lián)。它對匹配 glob 的文件進行監(jiān)控，文件被修改了就執(zhí)行關(guān)聯(lián)的任務（task）

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
監(jiān)聽文件，一旦文件發(fā)生改變就會執(zhí)行tasks數(shù)組中指定的任務，或者執(zhí)行cb函數(shù)，并觸發(fā)watcher的change事件

可監(jiān)控的事件
默認只有創(chuàng)建、更改或刪除文件監(jiān)控程序就會執(zhí)行關(guān)聯(lián)的任務， 其他可通過 events 參數(shù)指定，事件有 'add'、'addDir'、'change'、'unlink'、'unlinkDir'、'ready'、'error'。
此外，還有一個 'all' 事件，它表示除 'ready' 和 'error' 之外的所有事件

gulp-watch使用說明及要求
1）盡可能的將監(jiān)聽任務拆開
2）減少開發(fā)模式下的功耗：比如不進行壓縮處理，特別是圖片的壓縮需要時間較長,這就需要判斷當前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境

監(jiān)控page下面所有js文件，有變化就執(zhí)行jsChange方法

const { task, series, parallel, watch } = require('gulp');

function clean(cb) {
    console.log('---------clean任務---------');
    cb();
}

function jsChange() {
    console.log('---------jsChange---------');
}

/**
 * 監(jiān)控page下面所有js文件的增刪改
 */
function watchPage() {
    console.log('---------watchPage---------');
    // 監(jiān)控page下面所有js文件的增刪改
    let watcher = watch('pages/**/*.js', () => {
        console.log('---------watch回調(diào)，在change add unlink執(zhí)行完回調(diào)--------');
    });
    // 修改觸發(fā)
    watcher.on('change', function(filepath) {
        console.log('---------修改觸發(fā):', filepath);
    });

    // 添加觸發(fā)
    watcher.on('add', function(filepath) {
        console.log('---------添加觸發(fā):', filepath);
    });
    // 刪除觸發(fā)
    watcher.on('unlink', function(filepath) {
        console.log('---------刪除觸發(fā):', filepath);
    });
    return watcher;
}

task('dev', series(clean, parallel(jsChange, watchPage)));

六、插件

Gulp 插件實質(zhì)上是Node 轉(zhuǎn)換流，它封裝了通過管道（pipeline）轉(zhuǎn)換文件的常見功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之間?？梢愿慕?jīng)過流（stream）的每個文件的文件名、元數(shù)據(jù)或文件內(nèi)容

可以在 插件搜索頁面 搜索需要的插件。

插件應當總是用來轉(zhuǎn)換文件的。其他操作都應該使用（非插件的） Node 模塊或庫來實現(xiàn)。

1、gulp簡單插件
gulp-imagemin 壓縮圖片
gulp-sass 將scss文件轉(zhuǎn)為css
gulp-postcss 與autoprefixer配合使用
gulp-open 默認瀏覽器打開指定頁面
gulp-htmlmin 最小化html文件
gulp-minify-css 最小化css（gulp-clean-css也是）
gulp-uglify 混淆js文件
gulp-concat 合并js,css文件

2、復雜插件
gulp-replace 對指定文件內(nèi)容進行替換，可以用正則
gulp-usemin 將html中外鏈的css和js文件
gulp-zip 將文件打包成zip
gulp-sequence 串行執(zhí)行任務，相對于gulp.task中依賴的任務是并行執(zhí)行的
gulp-rev-all 對js或css文件加MD5戳，緩存用

3、其他node模塊
del 刪除指定目錄下所有文件
autoprefixer 自動加瀏覽器前綴
browser-sync 文件內(nèi)容變化瀏覽器自動刷新
yargs 處理node命令傳入的參數(shù)
cross-env 跨platform的命令處理，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env，window系統(tǒng)下報錯