ES6とES5が混在したコードをビルドする

ES6のビルド結果とES5のソースをくっつける

みたいな事をやりたい。

code:gulpfile.js

const gulp = require('gulp');

const plumber = require('gulp-plumber');

// ES6ビルド関連

const browserify = require('browserify');

const babelify = require('babelify');

const source = require('vinyl-source-stream');

// ES5ビルド関連

const concat = require('gulp-concat');

const babel = require('gulp-babel');

const uglify = require('gulp-uglify');

// ES6のビルド

gulp.task('es6', _ => {

return browserify("es6/entry.js")

.bundle()

.pipe(source("es6.js"))

.pipe(plumber())

.pipe(gulp.dest('dist'));

});

// ES5のビルド

gulp.task('es5', _ => {

sources.push('dist/es6.js');

return gulp.src(sources)

.pipe(plumber())

.pipe(concat('es5.js'))

.pipe(gulp.dest('dist'));

});

// デベロップビルド

gulp.task('dev', gulp.series('es6', 'es5'));

// リリースビルド

gulp.task('release', gulp.series('dev', function babel_uglify(){

return gulp.src('dist/es5.js')

.pipe(plumber())

.pipe(babel({

sourceType: "script",

compact: false

}))

.pipe(uglify('bundle.js'))

.pipe(gulp.dest('dist'));

}

// 自動ビルド

gulp.task('watch', _ => {

// es6層が更新されたら es6, es5 をビルド

// es5層が更新されたら es5 のみビルド

});

ES6のビルド

たぶんデフォルトオプションか何かだと思う。

ES5のビルド

単純にソース結合してるだけ

最後にES6で作った中間生成物を追記

リリースビルド

先にes6とes5のビルドをする。

parserOptionsの中は、ESLint の設定ではなく espree (ESLint が使っている構文解析器) の設定です。そのため、parserオプションを指定して別の構文解析器 (babel-eslintとか) を使っている場合は、記述内容がまったく異なる可能性があります。具体的には各々の構文解析器プラグインの発表を参照してください。

今回はes6層の中間生成物がマージ済みで馬鹿でかいので、無効化してる