这个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
// 数组中写哪一个执行哪一个任务， 从左到右执行

复制代码