Gulp4 相对于 Gulp3 改动还是挺多的，尤其是创建任务、监听还有任务池的变化。自己看着文档给 Gulp3 的脚本升了个级。

脚本功能：
- js 合并压缩
- less 文件解析
- css 文件合并压缩
- html 文件压缩
- 实时监控动态刷新页面

const { parallel, series, src, dest, watch } = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var cssClean = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var livereload = require('gulp-livereload');
var connect = require('gulp-connect');
var open = require('open');
const gulpLoadPlugins = require('gulp-load-plugins');

function js() {
    return src('src/js/*.js')
        .pipe(concat('build.js'))
        .pipe(dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(dest('dist/js'))
        .pipe(connect.reload())
}


function lessparse() {
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('src/css/'))
        .pipe(connect.reload())
}


function css() {
    return src('src/css/*.css')
        .pipe(concat('build.css'))
        .pipe(dest('dist/css/'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssClean({ compatibility: 'ie8' }))
        .pipe(dest('dist/css/'))
        .pipe(connect.reload())
}

function html() {
    return src('index.html')
        .pipe(htmlmin({ collapseWhitespace: 'true' }))
        .pipe(dest('dist/'))
        .pipe(connect.reload())
}


function server() {
    connect.server({
        root: 'dist/',
        livereload: true,
        port: 5000
    })
    open('http://localhost:5000');
    watch('src/js/*.js', js);
    watch('src/less/*.less', lessparse);
    watch('src/css/*.css',css);
    watch('index.html', html);

}

exports.default = server
打赏分享