Gulp常用的插件及用法

1.Gulp 插件

• gulp-htmlmin ： html文件压缩
• gulp-csso ：压缩css
• gulp-babel ：JavaScript语法转化
• gulp-less ：语法转化
• gulp-uglify ：压缩混淆JavaScript
• gulp-file-include 公共文件包含
• browserync 浏览器实时同步

2.HTML代码压缩&抽取HTML公共代码

• 抽取html中的公共部分放到一个html文件中
• 用@@include('common/header.html')替换公共代码片段
• 安装插件：npm install gulp-htmlmin 和npm install gulp-file-include

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    //获取当前目录下的所有html
    return gulp.src('./src/*.html')
        .pipe(fileinclude())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
});

3.Gulp 插件的使用方法

具体使用案例参考：https://www.npmjs.com/

• 安装插件
• 导入模块
• 调用方法

4.构建任务

gulp.task('default',gulp.series('htmlmin','csso','babel'));

执行gulp default或gulp即可实现多个任务的同时执行

//引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
//html任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    //获取当前目录下的所有html
    return gulp.src('./src/*.html')
        .pipe(fileinclude())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
});
//css文件压缩任务
gulp.task('csso', function () {
    return gulp.src('src/tab.css')
        .pipe(csso())
        .pipe(gulp.dest('dist'));
});
//JavaScript语法转化和压缩任务
gulp.task('babel', () =>
    gulp.src('src/base.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist'))
);
//构建任务
gulp.task('default',gulp.series('htmlmin','csso','babel'));