这个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 或 productionvar environment = process.env.NODE_ENV || 'development';//根据自己开发的实际需求自行设置， src放开发文件， dist是打包压缩后的导出目录const folder = {    src: "src/",    dist: 'dist/'}// 压缩html代码const htmlClean = require('gulp-htmlclean');// 图片类： 压缩PNG, JPEG, GIF and SVGconst 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 和 debuggerconst removeComments = require('gulp-strip-debug')//less 转 cssconst 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// 数组中写哪一个执行哪一个任务， 从左到右执行复制代码