快適なReact開発環境を目指して

gulpファイルの勉強に何かいいサンプルはないかと探していると、まさに探し求めていたものを見つけました。 github.com

このgulpfileをES6っぽく書くとこうなります。

'use strict';

const gulp        = require('gulp');
const gutil       = require('gulp-util');
const source      = require('vinyl-source-stream');
const babelify    = require('babelify');
const watchify    = require('watchify');
const exorcist    = require('exorcist');
const browserify  = require('browserify');
const browserSync = require('browser-sync').create();

// Input file.
watchify.args.debug = true;
const bundler = watchify(browserify('./app/js/app.js', watchify.args));

// Babel transform
bundler.transform(babelify.configure({
    sourceMapRelative: 'app/js'
}));

// On updates recompile
bundler.on('update', bundle);

function bundle() {

    gutil.log('Compiling JS...');

    return bundler.bundle()
        .on('error', (err) => {
            gutil.log(err.message);
            browserSync.notify("Browserify Error!");
        })
        .pipe(exorcist('app/js/dist/bundle.js.map'))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./app/js/dist'))
        .pipe(browserSync.stream({once: true}));
}

/**
 * Gulp task alias
 */
gulp.task('bundle', () =>{
    return bundle();
});

/**
 * First bundle, then serve from the ./app directory
 */
gulp.task('default', ['bundle'], () => {
    browserSync.init({
        server: "./app"
    });
});
Status API Training Shop Blog About Pricing

軽くReactのテストするならこんなもんで良さそう。 しかし何がどうなって動いているのかわからないので、また調べてから解説を記事にします。

参考記事通りに進めても、import/modulesが使えないので中途半端。こちらももう少し調べよう。