gulp+es6 配置

這個gulp配置可以在生產環境下壓縮代碼， 使用less， ES6開發 自動熱更新， 自動刷新頁面

關於每個插件的解釋我都已經寫上了

gulp 相對而言比 webpack 簡單得多，就這四條執行函數，流程化很簡潔

// gulp.src()
// gulp.dest()
// gulp.task()
// gulp.watch()
複製代碼

可是坑仍是有的， 尤爲是es6降級這裏，弄了很久才發現是版本問題。 我把本身寫的配置貼出來供你們參考

重點 （版本錯誤會致使沒法輸出）

必定要好好檢查babel 和 gulp-babel版本

若是你的電腦再使用babel7 版本， 請下載 gulp-babel 8 版本

npm install --save-dev gulp-babel @babel/core @babel/preset-env

若是你和個人同樣，babel是6版本， 請下載 gulp-babel 7 版本

npm install --save-dev gulp-babel@7 babel-core babel-preset-env

插件版本

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015":"^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^4.2.0",
    "gulp-connect": "^5.7.0",
    "gulp-connect-reproxy": "^0.0.98",
    "gulp-htmlclean": "^2.7.22",
    "gulp-imagemin": "^5.0.3",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^3.0.2"
  },

複製代碼

gulpfile.js文件

var gulp = require('gulp');

// 在命令行設置爲生產環境或者開發環境
//開發環境不要使用壓縮，會影響找錯
// windows: set NODE_ENV = development 或 production  
//（可能會有問題， 建議使用 :var environment = process.env.NODE_ENV || 'development';）
// mac  linux : export NODE_ENV = development 或 production

var environment = process.env.NODE_ENV || 'development';

//根據本身開發的實際需求自行設置， src放開發文件， dist是打包壓縮後的導出目錄
const folder = {
    src: "src/",
    dist: 'dist/'
}

// 壓縮html代碼
const htmlClean = require('gulp-htmlclean');

// 圖片類： 壓縮PNG, JPEG, GIF and SVG
const imageMin = require('gulp-imagemin');

// uglify 不支持壓縮 es6 ， 須要先使用babel降級才行 */
const uglifyJS = require('gulp-uglify')
//es6 降級到es5    請使用  "gulp-babel": "^7.0.1", 
//切記不要用 8版本， 會出現沒法輸出的狀況
const babel = require('gulp-babel');
//去除掉 註釋， console 和 debugger
const removeComments = require('gulp-strip-debug')

//less 轉 css
const less = require('gulp-less');
//css3 兼容各種瀏覽器腳本
const postCss = require('gulp-postcss');
const autoPrefixer = require('autoprefixer');
//css代碼壓縮
const cleanCss = require('gulp-clean-css');

//建立服務器環境插件 支持熱更新
const connect = require("gulp-connect");

gulp.task('html', function () {
    const step = gulp.src(folder.src + "html/*")
        .pipe(connect.reload())
    if (environment == 'production') {
        step.pipe(htmlClean())
    }
    step.pipe(gulp.dest(folder.dist + "html/"))
})

gulp.task('img', function () {
    gulp.src(folder.src + "img/*")
        .pipe(imageMin())
        .pipe(gulp.dest(folder.dist + "img/"))
})

gulp.task('css', function () {
    var step = gulp.src(folder.src + "css/*")
        .pipe(connect.reload())
        .pipe(less())
        .pipe(postCss([autoPrefixer()]))
    if (environment == 'production') {
        step.pipe(cleanCss())
    }
    step.pipe(gulp.dest(folder.dist + "css/"))
})

gulp.task('js', function () {
    var step = gulp.src(folder.src + "js/*")
        .pipe(connect.reload())
        .pipe(babel({
            presets: ['es2015']
        }))
    if (environment == 'production') {
        step.pipe(removeComments())
            .pipe(uglifyJS())
    }
    step.pipe(gulp.dest(folder.dist + "js/"))
})

gulp.task('server', function () {
    //設置默認服務器接口， livereload: true 是否監視文件變化
    connect.server({
        port: 8888,
        livereload: true
    })
})

//自動刷新頁面
gulp.task('watch', () => {
    gulp.watch(folder.src + "html/*", ['html']);
    gulp.watch(folder.src + "css/*", ['css']);
    gulp.watch(folder.src + "js/*", ['js'])
})

gulp.task("default", ["html", "img", "css", "js", "server", "watch"]);
// default任務必定要寫，否則會報警告： Task 'default' is not in your gulpfile
// 數組中寫哪個執行哪個任務， 從左到右執行

複製代碼