gulp+babel实现es6压缩，并替换es6语法，压缩html,css

1：创建一个文件夹，这里取名为final,要是没有安装过gulp的就先全局安装Gulp包：   npm install -g gulp 

2;在目录下新建文件夹src，存放源文件。

3:在final文件夹下cmd，输入npm init，初始化npm

这儿出现的信息随便填写，不写直接enter就是用默认值。

出现is this ok,输入y,回车。

生成如下目录结构：

4：在final目录下新增文件：.babelrc（这里我是取消了严格模式）

执行命令 npm install babel-plugin-transform-remove-strict-mode -D

5： 安装 gulp

命令：npm install gulp --save-dev。

6：安装gulp-babel，babel-core 和babel-preset-es2015

命令：npm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev

注意：gulp-babel版本最好不要超过8.0.0，否则可能出现Plugin/Preset files are not allowed to export objects的问题。

成功之后会在根目录下看到node模块文件夹

7:下载（重命名与压缩插件）npm install gulp-rename gulp-uglify

8：在final文件夹下新建gulpfile.js文件。

内容如下：

这里任务名为minjs,  gulp.src('./src/*.js')表示的是源代码路径，.pipe(gulp.dest('./src/'))代表新文件生成的路径。

.pipe(rename(function (file){  是新生成的文件的文件名规则，官方教程：https://www.npmjs.com/package/gulp-rename

输入gulp minjs执行：

生成结果：

二：压缩html，这里我只是处理了html标签的换行与空格。

1:gulp-htmlmin 这是一款HTML文件压缩插件, 通过命令npm install --save-dev gulp-htmlmin下载，官网：https://www.npmjs.com/package/gulp-htmlmin

2：创建gulp任务：

若需要去除html中注释的内容则在collapseWhitespace: true后面添加:removeComments: true，需要注意的是，压缩后组件上的大写变量名会变成小写，需要大小写敏感加上caseSensitive:true即可，多个属性之间,号分隔。

参考网址：https://github.com/kangax/html-minifier

3：压缩，输入命令,gulp htmlmin。

三：压缩css

1:下载gulp-minify-css，命令npm install gulp-minify-css --save-dev

2：创建gulp任务：

const minifycss = require("gulp-minify-css");//压缩css

gulp.task('cssTask', function () {
    return gulp.src("./src/*.css")
    .pipe(minifycss({
        advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        keepBreaks: false,//是否保留换行，默认false
        keepSpecialComments: '*'//保留所有特殊前缀
    }))
    .pipe(gulp.dest('./dist/'))
});

3：压缩，输入命令gulp cssTask。