gulp4.0 最新使用，代码构建（内涵babel、less、自动刷新、懒刷新等），全网最全使用

一、进入package.json 文件

1、下载所需的插件

{
  "name": "test_gulp",
  "version": "1.0.0",
  "description": "xiangge_first_gulp",
  "main": "index.js",
  "scripts": {},
  "author": "xiangge",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^4.0.1",
    "gulp-load-plugins": "^2.0.2",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "open": "^7.0.3"
  }
}

二、进入gulpfile.js 文件

const { src, dest, parallel, series, watch  } = require("gulp");
const $ = require('gulp-load-plugins')();
const open = require('open');                                   // 打开页面

const js = function() {
    return src('src/js/**/*.js')
        .pipe($.concat('common.js'))        // 合并文件
        .pipe($.babel({
            presets: ['@babel/env']     // es6转换为es5
        }))                  
        .pipe(dest('dist/js/'))         // 临时输出到本地
        .pipe($.uglify())                 // 压缩js文件
        .pipe($.rename({suffix: '.min'})) // 重命名
        .pipe(dest('dist/js/'))         // 最终输出
        .pipe($.connect.reload())
};

const less_fuc = function () {
    return src('src/less/**/*.less')
        .pipe($.less())                         // 编译less 文件为css
        .pipe(dest('src/css/less'))             // 临时输出到css 文件内
        .pipe($.connect.reload())
};

const css = function () {
    return src('src/css/**/*.css')
        .pipe($.concat('index.css'))
        .pipe(dest('dist/css/'))
        .pipe($.cleanCss())                     // 压缩css文件
        .pipe($.rename({suffix: '.min'}))
        .pipe(dest('dist/css/'))
        .pipe($.connect.reload())
};

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

// 注册服务器
const server = function() {
    return $.connect.server({
        root: 'dist/',
        livereload: true,
        port: 8001
    });
}

// 打开页面地址
const openUrl = function () {
    return open(`http://localhost:8001`)
}

// 监听文件更改后 重新 压缩或者编译文件
const watch_fun = function () {
    return (
                watch(['src/**/*.js'], parallel(js)),
                watch(['src/**/*.css'], parallel(css)),
                watch(['src/**/*.less'], series(less_fuc, css)),
                watch(['src/**/*.html', 'index.html'], parallel(html))
            )
}

exports.js = js
exports.less = less_fuc
exports.css = css

exports.default = 
    series(
        parallel(  // series: 同步 ； parallel异步
            js, 
            series(less_fuc, css),
            html    
        ),
        openUrl,
        parallel(
            watch_fun,
            server 
        )
    )

三、文件目录

-------- 感兴趣可以进入我的小屋瞅瞅，后面会更新很多大家关心的东西点击我