用gulp 搭建ES6 环境

最近在公司的一个老项目是起一个特性的时候发现没有不用ES6写前端代码贼蛋疼，于是决定在项目中引入ES6。因为公司原来使用gulp 搭建的开发环境，因此这里总结下gulp环境下引入babel的方法。
首先安装4个gulp插件：

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install babel-core --save-dev
npm install gulp-babel --save-dev
npm install gulp-remove-use-strict  //这个是用于去掉严格模式用的，不要用的话可以不安装

然后在gulpfile.js文件中加入以下代码：

//es6转es5 去除严格模式
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env', {
            "sourceType": "script"
        }],
        "plugins": [
            "transform-remove-strict-mode"
        ]
    }))
    .pipe(removeUseStrict())
    .pipe(gulp.dest('./app/js/viewsdist'))
});

//es6转es5 严格模式
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./app/js/viewsdist'))
});

其中，src后面的数组跟着的是ES6文件存放的路径，gulp.dest后面跟着的是输出路径。
然后在命令行中输入 gulp babel即可在输出目录看到结果。
要吐槽的是照着gulp-remove-use-strict这个插件的官网例子打一遍既然没效果，折腾了我半天时间！！！