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 
        )
    )

三、文件目錄

-------- 感興趣可以進入我的小屋瞅瞅，後面會更新很多大家關心的東西點擊我