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档案啦~~

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