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

1:创建一个文件夹,这里取名为final,

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

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

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

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

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

生成如下目录结构:

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

4:在final目录下新增文件:.babelrc(这里我是取消了严格模式)

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

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

5: 安装 gulp

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

6:安装gulp-babel,babel-core 和babel-preset-es2015

命令:npm install [email protected] babel-core babel-preset-es2015 --save-dev

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

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

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

7:下载npm install gulp-rename gulp-uglify

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

内容如下:

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

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

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

输入gulp minjs执行:

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

生成结果:

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

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