gulpfile配置及常用插件

需求：

实现开发模式下启动服务器，文件修改后实现自动重载（热更新）；打包模式下进行文件压缩与版本更新（防止缓存）。

gulp版本为4.0.2

package.json scripts 与 devDependencies 依赖包安装

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "src/ts/index.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build",
    "tsc": "gulp tsc",
    "clean": "gulp clean"
  },
  "author": "ys",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-rev": "^9.0.0",
    "gulp-rev-collector": "^1.3.1",
    "gulp-sass": "^4.0.2",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-uglify": "^3.0.2",
    "open": "^7.0.0",
    "typescript": "^3.7.3"
  }
}

插件引用

const {src, dest, watch, parallel, series} = require('gulp');
const connect = require('gulp-connect'); //启动本地服务
const open = require("open"); //打开浏览器
const del = require('del'); //删除文件及文件夹
const sass = require('gulp-sass'); //sass、scss编译
const ts = require('gulp-typescript'); //编译ts
const rev = require("gulp-rev"); //文件版本号
const revCollector = require("gulp-rev-collector"); //文件版本号映射
const uglify = require("gulp-uglify");     //js文件压缩
const cssmin = require("gulp-cssmin");     //css压缩
const htmlMin = require("gulp-htmlmin");   //html文件压缩

变量配置

const app = {
    srcPath: 'src/',        //项目根目录
    buildPath: 'dist/',     //发布模式根目录
    devPath: 'dev/',        //开发模式根目录
    revPath: 'rev/'         //版本号根目录
};

let html_min_options = {
    collapseWhitespace: true,                //压缩HTML
    collapseBooleanAttributes: true,         //省略布尔属性的值
    removeComments: true,                    //清除HTML注释
    removeEmptyAttributes: true,             //删除所有空格作属性值
    removeScriptTypeAttributes: true,        //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,     //删除<style>和<link>的type="text/css"
    minifyJS: true,                          //压缩页面JS
    minifyCSS: true                          //压缩页面CSS
};

删除【开发模式】与【发布模式】生成的文件与文件夹

function clean(cb) {
    return del([app.devPath, app.buildPath, app.revPath], cb)
}

开发模式【DEV】任务

function image() {
    return src(app.srcPath + 'images/**/*')
        .pipe(dest(app.devPath + 'images'))
        .pipe(connect.reload());
}

function css() {
    return src(app.srcPath + 'scss/**/*.scss')
        .pipe(sass())
        .pipe(dest(app.devPath + 'css'))
        .pipe(connect.reload());
}

function tsc() {
    return src(app.srcPath + 'ts/**/*.ts')
        .pipe(ts())
        .pipe(dest(app.srcPath + 'js'));
}

function js() {
    return src(app.srcPath + 'js/**/*.js')
        .pipe(dest(app.devPath + 'js'))
        .pipe(connect.reload());
}

function html() {
    return src(app.srcPath + '**/*.html')
        .pipe(dest(app.devPath))
        .pipe(connect.reload());
}

function server(cb) {
    /*设置服务器*/
    connect.server({
        root: [app.devPath],    //要运行哪个目录
        livereload: true,       //是否热更新
        port: 5000              //端口号
    })
    open("http://localhost:5000")

    watch(app.srcPath + 'images/**/*', image);
    watch(app.srcPath + 'scss/**/*.scss', css);
    watch(app.srcPath + 'ts/**/*.ts', series(tsc, js));
    watch(app.srcPath + 'js/**/*.js', js);
    watch(app.srcPath + '**/*.html', html);
    cb()
}

发布模式【BUILD】任务

function image_build() {
    return src(app.srcPath + 'images/**/*')
        .pipe(rev())
        .pipe(dest(app.buildPath + 'images'))
        .pipe(rev.manifest())
        .pipe(dest(app.revPath + 'images'));
}

function scss_build() {
    return src(app.srcPath + 'scss/**/*.scss')
        .pipe(sass())
        .pipe(dest(app.srcPath + 'css'));
}

function css_build() {
    return src(app.srcPath + 'css/**/*.css')
        .pipe(rev())
        .pipe(cssmin())
        .pipe(dest(app.buildPath + "css/"))
        .pipe(rev.manifest())
        .pipe(dest(app.revPath + 'css'));
}

function css_clean(cb) {
    return del([app.srcPath + 'css'], cb);
}

function tsc_build() {
    return src(app.srcPath + 'ts/**/*.ts')
        .pipe(ts())
        .pipe(dest(app.srcPath + 'js'));
}

function js_build() {
    return src(app.srcPath + 'js/**/*.js')
        .pipe(rev())
        .pipe(uglify())
        .pipe(dest(app.buildPath + 'js/'))
        .pipe(rev.manifest())
        .pipe(dest(app.revPath + 'js'));
}

function image_rev_collector() {
    return src([app.revPath + "**/*.json", app.buildPath + "**/*.css"])
        .pipe(revCollector({replaceReved: true}))
        .pipe(dest(app.buildPath + '/'));
}

function html_build() {
    return src([app.revPath + "**/*.json", app.srcPath + "**/*.html"])
        .pipe(revCollector({replaceReved: true}))
        //.pipe(htmlMin(html_min_options))
        .pipe(dest(app.buildPath + '/'));
}

function build_clean(cb) {
    return del([app.revPath, app.buildPath], cb);
}

代码地址