关于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 = `HelloWorld`;

编写构建程序（./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.htmlfunction 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.htmlfunction 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];// anyconst test = '123';// 函数// 源码取自：https://www.w3cschool.cn/typescript/typescript-functions4ovw1wz8.htmlfunction 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的代码