淺談gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用項目流程操作

寫在前面：
因爲gulp是一個基於node的工具，所以我們需要先安裝node，具體可見【node的安裝及配置】

一、gulp簡介

gulp 是一個基於node的自動化打包構建工具，前端開發者可以使用它來處理常見任務：

• 搭建web服務器；
• 文件保存時自動重載瀏覽器；
• 使用預處理器如Sass、LESS；
• 優化資源，比如壓縮CSS、JavaScript、壓縮圖片；
• 類似Gulp的工具，我們通常稱之爲構建工具或者叫自動化構建工具；
• 強調的是前端開發的流程，通過配置一系列的task，定義task處理的事物，然後定義執行順序，來讓Gulp執行task，從而構建前端項目的流程，說白了就是用來打包項目；
• 基於 node 強大的流(stream)能力，gulp 在構建過程中並不把文件立即寫入磁盤，從而提高了構建速度；
• 不管做什麼功能，都有一個統一的接口進行管理，必須去註冊一個任務，然後去執行，這也是它的特點之一，即“任務化”。

二、gulp基本使用

1. 創建項目

① 創建項目目錄，結構如下（注：項目名稱不可使用gulp）：

例：

② 打開命令行工具：（注：package.json文件爲npm init –y自動創建，切勿手動創建）

• 使用cd命令進入項目目錄，如：cd mygulp
• 創建項目配置文件：npm init -y
• 此時項目目錄如下：

例：

2. gulp的安裝

在命令行工具，依次執行：

① 全局安裝：npm i gulp -g
② 局部安裝：npm i gulp -D
③ 檢測安裝版本：gulp -v

注： gulp -v 命令得到兩個版本號，一個全局，一個局部，代表安裝成功

此時項目結構如下：

例：

3. gulp配置文件

在項目中創建gulp配置文件 --> gulpfile.js

此時項目結構如下：

例：

4. 定義指令

在gulpfile.js文件中定義gulp指令，使用gulp實現功能。

const gulp = require("gulp"); // 引入gulp模塊
function testFn(){            // 準備指令功能
    console.log("test");
}
exports.test = testFn;         // 定義指令（暴露模塊）

三、gulp常用插件

以下插件使用格式爲：npm（空格）i（空格）插件名（空格）-D

清空文件夾：gulp-clean

編譯css：gulp-sass

壓縮圖片：gulp-imagemin

深度壓縮圖片：imagemin-pngquant

壓縮css：gulp-cssmin

css前綴：gulp-autoprefixer

壓縮js：gulp-uglify

ES6轉ES5：gulp-babel
套件1：@babel/core
套件2：@babel/preset-env

壓縮html：gulp-htmlmin

服務器插件：gulp-webserver

文件重命名：gulp-rename

合併js文件：gulp-concat

四、gulp常用項目流程操作及部分插件使用方法

1. 開始之前先引入將來要使用到的插件模塊

例：

const gulp = require("gulp");
const cssmin = require("gulp-cssmin");
const autoprefixer = require("gulp-autoprefixer");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const htmlmin = require("gulp-htmlmin");
const webserver = require("gulp-webserver");

2. css處理方式

例：

// 處理css的指令：壓縮，添加兼容前綴
function cssFn(){
    return gulp.src("./project/css/**/*")
            .pipe(autoprefixer("last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4"))
            .pipe(cssmin())
            .pipe(gulp.dest("./server/css"))
}
module.exports.css = cssFn;    // module.可省略

3. js處理方式

例：

// 處理js的指令：ES6編譯ES5，壓縮
function jsFn(){
    return gulp.src("./project/js/**/*")
        .pipe(babel({
            presets:["@babel/env"]
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./server/js"))
}
exports.js = jsFn;

4. html處理方式

例：

// 處理html的指令：壓縮
function htmlFn(){
    return gulp.src("./project/pages/**/*")
        .pipe(htmlmin({
            removeEmptyAttributes:true,
            collapseWhitespace:true
        }))
        .pipe(gulp.dest("./server/pages"))
}
exports.html = htmlFn;

5. 處理靜態資源

例：

function staticFn(){
    // 找到要處理的靜態資源文件
    return gulp.src("./src/static/**")
            // 直接轉存
           .pipe(gulp.dest("./dist/static"))
}
// 暴露調用方式
exports.static = staticFn;

6. 刪除文件夾

例：

function cleanFn(){
    // 找到要刪除的文件目錄
    return gulp.src("./ded")
            // 直接刪除
           .pipe(clean())
}
// 暴露調用方式
exports.clean = cleanFn;

7. 服務器配置

例：

function serverFn(){
    // 找到要指定爲根目錄的文件夾
    return gulp.src("./ded")
        // 執行服務器方式，並開始配置信息
        .pipe(webserver({
            // 指定訪問地址
            host:"localhost",
            // 指定端口
            port:3000,
            // 開啓自動刷新
            livereload:true,
            // 服務器開啓後，自動打開的頁面
            open:"./pages/index.html",
            proxies:[{
                // 代理之後的請求地址
                source:"./chapters",
                // 被代理的跨域地址
                target:"http://wanandroid.com/wxarticle/chapters/json"
                
            }]
        }))
}
// 暴露調用方式
exports.server = serverFn;

8. 開啓監聽

例：

function watchFn(){
    // 監聽所有css文件
    gulp.watch("./src/css/**",cssFn);
    // 監聽所有js文件
    gulp.watch("./src/js/**",jsFn);
    // 監聽所有html文件
    gulp.watch("./src/pages/**",htmlFn);
    // 監聽所有static文件
    gulp.watch("./src/static/**",staticFn);
}
// 暴露調用方式
exports.watch = watchFn;

9. 批量執行

注意：
gulp.series()：同步執行內部命令
gulp.parallel()：異步執行內部命令

例：

exports.all = gulp.series(
    gulp.parallel(cssFn,jsFn,htmlFn,staticFn),
    gulp.parallel(serverFn,watchFn)
);

---

【附：gulp 官網：gulp官網 (內附衆多中文網鏈接，請盡情“食用”)】