关于javascript:Gulp开发实战

通过实例来理解如何应用 Gulp 插件来实现自动化工作

应用插件的步骤

1. 装置 npm install [插件名称]
2. 在 gulpfile.js 引入插件，const func = require("[插件名称]")
3. 在管道函数中，调用插件 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 的代码做压缩解决

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

npm install -D gulp-uglify

编写须要被压缩的 JS 代码：

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

编写构建程序

const {src, dest, parallel} = require('gulp');
const uglify = require('gulp-uglify');

function handle_uglify() {return src('./src/js/**/*.js')
            .pipe(uglify())
            .pipe(dest('dist/build'));
}

exports.default = handle_uglify;

压缩后的后果

let num=1;var word="Hell",flag=!1,yz=["hello",1];const test="123";function add(l,t){return l+t}

能够看到，其中 ES6 的关键字并没有被编译成 ES5 的代码