search
LoginSignup
48

More than 5 years have passed since last update.

posted at

updated at

Gulp(React.js+Browserify)でyak shaving

人間の欲は深いのでyak shavingが生じます。その例です。

yak shavingしてるので最終形態をはじめにのせておきます、目次だけ見てこちらを参考にするのもいいかもしれません。

Gulp, browserify, reactify, coffee-reactify, notify and watchify for coffeescript

ディレクトリ構成

package.json
build/
  - app.js
src/
  - app.coffee
  - foo.coffe
  - bar.coffe 

Browserify + React.js

シンプルな例です。

$ npm install react browserify reactify vinyl-source-stream -save
gulpfile.coffee
ulp = require('gulp')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    return browserify
            entries: './src/app.js'
            transform: ['reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

CoffeeScriptで書きたいです

Javascriptではなく、CoffeeScriptが使いたいです。

$ npm install coffee-reactify coffee-script
gulpfile.coffee
gulp = require('gulp')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    return browserify
            entries: './src/app.coffee'
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

複数ファイルをBrowserifyしたいです

$ npm install glob -g
gulpfile.coffee
gulp = require('gulp')
glob = require('glob')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->                                                                                                                                                                       
    srcFiles = glob.sync('./src/*.coffee')
    return browserify
            entries: srcFiles
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

Ref:

Watchしたいです

gulp-watchを使う方法です。

$ npm install gulp-watch -save
gulpfile.coffee
gulp = require('gulp')
glob = require('glob')
watch = require('gulp-watch')

browserify = require('browserify')
source = require('vinyl-source-stream')

gulp.task 'default', ->
    srcFiles = glob.sync('./src/*.coffee')
    return browserify
            entries: srcFiles
            transform: ['coffee-reactify']
        .bundle()
        .pipe source('bundle.js')
        .pipe gulp.dest('./build')

gulp.task 'watch', ->
    gulp.watch './src/*.coffee', ['default']

この場合だと、ビルドに失敗した場合、watchしてるnodeのプロセスが落ちてしまいます。以下の記事を参考にして修正するといいかもしれません。

この問題は、以下の"Notifyしたいです"でも解決しているので、好きな方を試してみてください。

browserifyでgulp-plumberが効かない時の対処方法 - Qiita

Notifyしたいです

gulp-watchを使ってもできますが、watchifyを使ってやります。今までのgulpfileはぶち壊します。

$ npm install gulp-notify gulp-util watchify
gulpfile.coffee
source = require 'vinyl-source-stream'
gulp = require 'gulp'
gutil = require 'gulp-util'
browserify = require 'browserify'
coffee_reactify = require 'coffee-reactify'
watchify = require 'watchify'
notify = require 'gulp-notify'
glob = require 'glob'

paths =
    srcFiles: glob.sync('./src/*.coffee')
    build: './build/'
    buildFile: 'bundle.js'


buildScript = (files, watch) ->
    rebundle = ->
        stream = bundler.bundle()
        stream.on("error", notify.onError(
            title: "Compile Error"
            message: "<%= error.message %>"
        )).pipe(source(paths.buildFile)).pipe gulp.dest(paths.build)

    props = watchify.args
    props.entries = files
    props.debug = true

    bundler = (if watch then watchify(browserify(props)) else browserify(props))
    bundler.transform coffee_reactify
    bundler.on "update", ->
        rebundle()
        gutil.log "Rebundled..."
        gutil.log paths.srcFiles
        return

    rebundle()


gulp.task "default", ->
    buildScript paths.srcFiles, false

gulp.task "watch", ["default"], ->
    buildScript paths.srcFiles, true

Error時

スクリーンショット 2015-03-12 16.01.48.png

benrify!

Ref:

まとめ

このように、React.jsを使ってなにか作りたいのに、gulpの設定で一日の大半が終わってしまいます。

まだ、concatとかほしいですね。

いい加減にしましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
48