快適な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が使えないので中途半端。こちらももう少し調べよう。