Help us understand the problem. What is going on with this article?

gulp+browserifyで環境構築、watchify導入まで

More than 3 years have passed since last update.

gulpとbrowserifyを使って、livescriptでの開発環境構築をしたので構成などを書いていきます。
また、gulpのタスクなどはlivescriptを使って書いていきます。
ほぼ同じやり方で他のAltJSでも応用することが出来ます。

Directory structure

.
├── gulpfile.js
├── build
├── src
└── gulp
    ├── browserify.ls
    ├── build.ls
    ├── default.ls
    ├── index.ls
    ├── uglify.ls
    ├── watch.ls
    └── watchify.ls

Installed node modules

npm i -D modules

  • livescript
  • prelude-ls
  • gulp
  • gulp-plumber
  • gulp-rename
  • gulp-uglify
  • gulp-util
  • browserify
  • browserify-livescript
  • watchify
  • colors
  • run-sequence
  • vinyl-source-stream

gulpfile

gulpfile.jsからAltJSで書いたファイルを読み込みます。

gulpfile.js
require("livescript");
require("./gulp/index.ls");

index.lsからgulpディレクトリ内にあるファイルを一括で読み込みます。
また、ファイルはタスク毎に分割していきます。

gulp/index.ls
require! <[gulp fs]>
global <<< require \prelude-ls

fs.readdir-sync __dirname
|> filter ( .match /\.ls$/)
|> reject ( .match /index/)
|> each ->
  (require "#__dirname/#it") gulp

gulp-task: default

デフォルトタスクはgulp buildに設定します。

default.ls
module.exports = (gulp)->
  gulp.task \default, <[build]>

gulp-task: build

build.ls
require! \run-sequence

module.exports = (gulp)->
  gulp.task \build, (cb)->
    run-sequence \browserify, \uglify, cb

gulp-task: browserify

watchify導入にあたりタスクの共通化も考えましたが、いい感じに書けなかったので別ファイルで書いています。
似たようなことを書いているので出来れば共通化したい。。

gulp/browserify.ls
require! <[browserify colors]>
source = require \vinyl-source-stream

module.exports = (gulp)->
  gulp.task \browserify, (cb)->
    browserify do
      entries: <[./src/embed/index.ls]>
      extensions: <[ls js]>
    .transform \browserify-livescript
    .bundle!
    .on \error, -> process.stderr.write it.to-string!.white.bg-red; @emit \end
    .pipe source \embed.js
    .pipe gulp.dest \build/

gulp-task: uglify

gulp/uglify.ls
require! <[gulp-uglify gulp-rename]>

module.exports = (gulp)->
  gulp.task \uglify, (cb)->
    gulp
      .src \build/embed.js
      .pipe gulp-uglify!
      .pipe gulp-rename extname: \.min.js
      .pipe gulp.dest \build/

gulp-task: watch

gulp/watch.ls
module.exports = (gulp)->
  gulp.task \watch, (cb)->
    gulp.watch \./src/**/*.ls, <[watchify]>

gulp-task: watchify

gulp/watchify.ls
require! <[browserify watchify colors gulp-util gulp-plumber]>
source = require \vinyl-source-stream

module.exports = (gulp)->
  gulp.task \watchify, (cb)->
    ops =
      entries: <[./src/embed/index.ls]>
      extensions: <[ls js]>
      cache: {}
      package-cache: {}
    bundler = browserify ops |> watchify
      ..transform \browserify-livescript
    bundle = ->
      bundler
        .bundle!
        .on \error, -> process.stderr.write it.to-string!.white.bg-red; @emit \end
        .pipe gulp-plumber!
        .pipe source \embed.js
        .pipe gulp.dest \build/
    bundler
      ..on \update, bundle
      ..on \log, gulp-util.log
    return bundle!

まとめ

browserify + watchifyを導入できたので、ビルドがかなり早くなりました。
ただ、書き方が悪いのかたまにwatchifyが上手く動いてくれないのでここは要調査です。

追記

2016/02/29 watchifyでtransformする場所を修正

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away