Gulp开发实战

通过实例来了解如何使用Gulp插件来完成自动化任务

使用插件的步骤

安装 npm install [插件名称]
在gulpfile.js引入插件，const func = require("[插件名称]")
在管道函数中，调用插件 gulp.pipe(func())

CSS处理

gulp-cssmin

用于压缩所有的css文件

安装

npm install gulp-cssmin -D

构建任务

const cssmin = require('gulp-cssmin');
const gulp = require('gulp');
 
function css_handle() {
    gulp.src('src/**/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist'));
}

exports.default = css_handle;

gulp-less

编译.less文件，生成.css

安装

npm install gulp-less -D

构建任务

const less = require('gulp-less');
const gulp = require('gulp');
 
function less_handle() {
    gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/less'));
}

exports.default = less_handle;;

less编译，并压缩

结合gulp-less和gulp-cssmin，实现编译less成css之后，再压缩文件

const less = require('gulp-less');
const cssmin = require('gulp-cssmin');
const gulp = require('gulp');

function css_handle() {
    return gulp.src('src/**/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
}
 
function less_handle() {
    return gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/base'));
}

exports.default = gulp.series(less_handle, css_handle);

HTML处理

gulp-htmlmin

使用gulp-htmlmin插件压缩.html文件

使用前，安装插件

npm install -D html-htmlmin

编写构建任务

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

function html_min() {
    return gulp.src('./src/html/**/*.html')
            .pipe(htmlmin({
                // 替换空格，换行
                collapseWhitespace: true,
                // 删除包含属性值的双引号，如 lang="en" -> lang=en
                removeAttributeQuotes: true
            }))
            .pipe(gulp.dest('./dist'));
}

exports.default = html_min;

该插件的相关配置，请参考：https://github.com/kangax/htm...

JS处理

gulp-babel

将ES6语法的代码编译成ES5代码

npm install -D gulp-babel @babel/core @babel/preset-env

编写ES6代码（./src/js/index.js）

const num = 10;
let name = 'Hello World';
let moreLine = `Hello

World`;

编写构建程序（./src/gulpfiles.js）

const gulp = require('gulp');
const babel = require('gulp-babel');

function build_babel() {
    return gulp.src('./src/js/**/*.js')
            .pipe(babel({
                presets: ['@babel/env']
            }))
            .pipe(gulp.dest('dist'));
}

exports.default = build_babel;

执行编译后，生成ES5(./dist/index.js):

"use strict";

var num = 10;
var name = 'Hello World';
var moreLine = "HellonnWorld";

大致的目录结构：


├─ dist
    ├─ index.js //编译后的ES5文件
├─ src
    ├─ js
        ├─ index.js //ES6源代码
├─ gulpfile.js

gulp-typescript

将Typescript程序（.ts文件）编译成ES5代码

参考：https://www.npmjs.com/package...

npm install gulp-typescript typescript -D

编写Typescript代码

清单1：./src/js/hello.ts

// 数字类型
const num:number = 1;
// 字符串
const word:string = "Hell";
// 布尔类型
const flag:boolean = false;
// 元组
let yz:[string , number];
yz = ["hello" , 1];

清单2：./src/js/world.ts

// 函数
// 源码取自：https://www.w3cschool.cn/typescript/typescript-functions4ovw1wz8.html
function add(x: number, y: number): number {
    return x + y;
}

编写构建程序（./src/gulpfiles.js）

const gulp = require('gulp');
const ts = require('gulp-typescript');

function build_typescript() {
    return gulp.src('./src/js/**/*.ts')
            .pipe(ts({
                noImplicitAny: true,
                outFile: 'tsbuild.js'
            }))
            .pipe(gulp.dest('dist/build'));
}

exports.default = build_typescript;

执行编译后，生成ES5(./dist/build/tsbuild.js):

// 数字类型
var num = 1;
// 字符串
var word = "Hell";
// 布尔类型
var flag = false;
// 元组
var yz;
yz = ["hello", 1];
// 函数
// 源码取自：https://www.w3cschool.cn/typescript/typescript-functions4ovw1wz8.html
function add(x, y) {
    return x + y;
}

大致的目录结构：

├─ dist
    ├─ build
        ├─ tsbuild.js //编译后的ES5文件
├─ src
    ├─ js
        ├─ hello.ts //Typescript源代码
        ├─ world.ts //Typescript源代码
├─ gulpfile.js

gulp-babel和gulp-typescript结合

结合两个插件，将检测到的ES6代码和Typescript代码都转换为ES5代码

如果两个插件都没安装的话，执行以下命令（已安装的忽略）：

npm install gulp-typescript typescript gulp-babel @babel/core @babel/preset-env -D

基于以上的两个实例，再配合gulp.parallel并行执行两个构建任务

const { src, dest, parallel } = require('gulp');
const babel = require('gulp-babel');
const ts = require('gulp-typescript');

function build_babel() {
    return src('./src/js/**/*.js')
            .pipe(babel({
                presets: ['@babel/env']
            }))
            .pipe(dest('dist/build'));
}

function build_typescript() {
    return src('./src/js/**/*.ts')
            .pipe(ts({
                noImplicitAny: true,
                outFile: 'tsbuild.js'
            }))
            .pipe(dest('dist/build'));
}

exports.default = parallel(build_babel , build_typescript);

gulp-uglify

压缩JS文件，该插件并不会识别ES6或者Typescript的代码，并将其转换成ES5，仅仅对JS的代码做压缩处理