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

复制代码