Gulp Babel ES6 编译(1) DAY83

Babel 为编译 ES6 的工具

那我们就要开始介绍如何安装与使用啦

https://www.npmjs.com/package/gulp-babel

npm install gulp-babel gulp-sourcemaps gulp-concat --save

输入

gulp.task('babel', () =>    gulp.src('./source/js/**/*.js')        .pipe($.babel({            presets: ['@babel/env']        }))        .pipe(gulp.dest('./public/js')));gulp.task('default',['jade','sass','babel','watch']);

这时候输入 gulp 可能会出现你没有bable-core
所以必须在

npm install --save @babel/core @babel/preset-env

这时候在source 资料夹分别新增 all.js 与 all2.js
all.js

var Fn = function Fn() {  console.log('a');};

all2.js

var Fn2 = function Fn() {  console.log('a');};

输入 gulp 会发现它分别编译两支 js档案出来

但这对效能不太友善

所以我们必须将这两支 js 档案 合併再一起

解决方法为
加上

.pipe($.concat('all.js'))

加上后的结果

gulp.task('babel', () =>    gulp.src('./source/js/**/*.js')        // .pipe(sourcemaps.init())        .pipe($.babel({            presets: ['@babel/env']        }))        .pipe($.concat('all.js'))        // .pipe(sourcemaps.write('.'))        .pipe(gulp.dest('./public/js')));

这样再次输入gulp 就会发现它们合併成一支 js档案啦~~

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷