gulp使用介紹及常見問題

自從前端各類框架出來之後，不多用原生的js寫項目了。最近作一個cas統一登陸系統，涉及多重登陸方式，一開始用vue寫的，後來爲了性能優化，用原生js重構了一遍，項目寫完打包的時候用到了自動化構建工具gulp。從新撿起來，溫故一下。

gulp使用

有時間的話仍是多看看開發文檔，gulp API文檔，這裏簡單介紹一下。
gulp.js是一個前端構建工具，上手很是容易。適合簡單原生JavaScript項目壓縮處理。

1. gulp安裝

首先肯定電腦已裝node環境。
而後以全局方式安裝gulp：
npm install -g gulp

全局安裝完gulp後，還須要在每一個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，而後在命令行中執行：
npm install gulp 或 npm install --save-dev gulp

2. 開始使用gulp

此處省去gulp各類插件的安裝。
簡單介紹一下js、html、css、images壓縮方法。
使用gulp，僅需知道4個API便可：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()
這裏推薦看這篇文章，介紹的很詳細
前端構建工具gulpjs的使用介紹及技巧

直接上例子：

'use strict';

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');         // 圖片壓縮
var uglify = require("gulp-uglify");             // js壓縮
var babel = require("gulp-babel");               // babel
var minifyCss = require("gulp-minify-css");      // css文件壓縮
var minifyHtml = require("gulp-minify-html");    // html文件壓縮
var clean = require('gulp-clean');


// js壓縮
gulp.task('minify-cas_login-js', async function () {
    await gulp.src('src/cas-login/cas.js')
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest('dist/cas-login'));
});

// js複製
gulp.task('copy-cas_login-js', async function () {
    await gulp.src('src/cas-login/*.min.js')
        .pipe(gulp.dest('dist/cas-login'));
});

// css壓縮
gulp.task('minify-cas_login-css', async function () {
    await gulp.src('src/cas-login/*.css') // 要壓縮的css文件
        .pipe(minifyCss()) //壓縮css
        .pipe(gulp.dest('dist/cas-login'));
});

// html壓縮
gulp.task('minify-cas_login-html', async function () {
    await gulp.src('src/cas-login/*.html') // 要壓縮的html文件
        .pipe(minifyHtml()) //壓縮
        .pipe(gulp.dest('dist/cas-login'));
});

// 圖片壓縮
gulp.task('minify-cas_login-images', async function () {
    await gulp.src('src/cas-login/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/cas-login/images'));
});

// Clean existed build
gulp.task('clean-cas_login', async function () {
    await gulp.src(
        [
            'dist/cas-login/*'
        ])
        .pipe(clean({force: true}));
});


// Build cas-login
gulp.task('login-build', gulp.series('clean-cas_login', gulp.parallel('minify-cas_login-js', 'minify-cas_login-css', 'minify-cas_login-html', 'minify-cas_login-images'), done => {
    done();
}));

這裏重點介紹常見問題 。

問題一：gulp: Did you forget to signal async completion?
控制檯打出以下提示：
The following tasks did not complete: testGulp
Did you forget to signal async completion?

解決辦法： 使用 async 和 await。
方法一：

const gulp = require('gulp');
gulp.task('testGulp', async() => {
   await console.log('Hello World!');
});

方法二：官方方法
向task的函數裏傳入一個名叫done的回調函數，以結束task

gulp.task('testGulp', done => {
  console.log('Hello World!');
  done();
});

問題二：AssertionError: Task function must be specified。
出現這個問題，主要是版本形成的，gulp 3 和 gulp 4運行方式是不同的，因此會出現錯誤。
Gulp3，若是有一個任務A，B和C的列表，你想在一個序列中運行（確保A在B開始以前完成，而B在C開始以前完成），代碼以下：

gulp.task('a', function () {
  // Do something.
});
gulp.task('b', ['a'], function () {
  // Do some stuff.
});
gulp.task('c', ['b'], function () {
    // Do some more stuff.
});

Gulp 4中，你不能再這樣作了，會獲得如下錯誤：

assert.js:85
  throw new assert.AssertionError({
  ^
AssertionError: Task function must be specified
    at Gulp.set [as _setTask] (/home/hope/web/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (/home/hope/web/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/home/hope/web/gulpfile.js:31:6)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

須要使用gulp.series和gulp.parallel，由於gulp任務如今只有兩個參數。
gulp.series：按照順序執行
gulp.paralle：能夠並行計算

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
  // Build the website.
}));

若是b,c任務依賴a任務，這樣

gulp.task('my-tasks', gulp.series('a', gulp.parallel('b', 'c'),  function() {
  // Do something after a, b, and c are finished.
}));

多任務進行會遇到的問題主要就是這個