Skip to content

Instantly share code, notes, and snippets.

@p-chan
Last active March 15, 2016 11:46
Show Gist options
  • Save p-chan/83fc91ce5e835b22025a to your computer and use it in GitHub Desktop.
Save p-chan/83fc91ce5e835b22025a to your computer and use it in GitHub Desktop.

Ichigoore

A boilerplate of gulp for FICC KYOTO development team.

Features

SASS

  • SCSS(Minify)
  • Bourbon
  • Autoprefixer

ES6

  • Browserify(Watchify)
  • Babelify
  • Uglify

Other

  • Browsersync
  • Imagemin
  • Plumber
  • Notify
@dsk52
Copy link

dsk52 commented Mar 15, 2016

ファイル監視が、gulp.watch()でもいいんだけど、gulp-changedとかgulp-newerを使うと変更があったものだけコンパイルかけれるみたいなのでどっちか使いたい。

gulp-changed

  • streamで流れてきたファイルと、出力先のファイルのタイムスタンプを比較して変更されたものだけコンパイルできる。
  • extensionオプションを使うと、jadeをhtmlに変換するなど、異なる拡張子になっても対応できる。
  • hasChangedオプションを使うと、タイムスタンプだけでなく、SHA-1ダイジェストで比較することも可能。

gulp-newer

  • タイムスタンプでの比較にのみ対応
  • 複数のsourceファイルを1ファイルに結合するような処理にも対応している

個人的にはnewer推し。

@p-chan
Copy link
Author

p-chan commented Mar 15, 2016

@d-kusk
ファイル監視についてだけど、d-kusk氏推薦のgulp-newerで良いかな?
採用前にissueに変なのないかだけ見てみたさあるので要確認

@dsk52
Copy link

dsk52 commented Mar 15, 2016

v4から書き方変わるらしくその辺にも対応したい。
例えば、task()のコールバック関数は一度外で定義してtask()の第二引数で関数を呼び出す書き方になるとのこと。(v3後半で既に使えるとのこと。v4からはコールバックの形で書いているとエラー)

hoge = function(){
    …
}
gulp.task('hoge', foge);

@dsk52
Copy link

dsk52 commented Mar 15, 2016

@p1ch-jp
gulp-newerで良いと思われます。issue確認しましょう。

これでコンパイル時間短くなればjade, slimなどなど使えるのでは…!

@dsk52
Copy link

dsk52 commented Mar 15, 2016

gulp-sassで複数ファイルのimportをさせようとするとエラーを吐いたので、gulp-sass-bulk-import が必要っぽい

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment