メッセージボード

[sugarshin]

@ykob @k-takam こちらひな形用意したので、プルリクおねがいします。 ぼくの個人的な設定なので、いろいろ修正しちゃってください。 よろしくお願いします。

[ykob]

あらためてみると、browser-syncとuglifyしか被ってないんだなぁ・・・

修正前ですが取り急ぎ、AltJS、プリプロセッサ、テンプレートエンジンは個人の趣味で自由にということにしていたので、共通のものとしては不要かなと思いました。

あとタスクを外部ファイルって便利ですかね？ 個人的には1ファイルにまとめてしまいたい派なんですが、多数決に従います。

[sugarshin]

sass のタスク追加しました。

gulpfile.js 1ファイルにまとめて書くとどうしてもハードコーディングになりやくてタスクごとにファイル分けてしておくと再利用性は高くなると思います。

あと、gulp でいろいろやりだすとどうしても gulpfile.js が長くなるので、ぼく個人的にはスクロールが必要なファイルになるよりは小分けにして別タブ表示のほうが見やすかったりします。あまり長くならないようなら gulpfile.js にまとめたほうが簡潔でいいかもですね。

あとは、こうやってわけておけば使わないaltjsやプリプロセッサのタスクは簡単に切り分けられて必要なタスクだけで組み上げられるかなと思います。

[takamat]

僕も最近はタスク毎にファイルを分けてます。 1ファイルが長くなるのがどうも苦手で。。

[sugarshin]

@ykob @k-takam では、プルリクで加筆訂正いただくか、新しくissue立ててどんどん編集していきましょう。

[sugarshin]

@ykob @k-takam いくつかポイントというか補足と、todo箇所です。

package.json についてですが、以下のように、

https://github.com/tsumikiinc/gulpfiles/blob/master/package.json#L9

private プロパティで true を指定しておけば、もし間違えて npm publish とコマンドを打ってしまっても npm レジストリへ公開されるのを防いでくれます。逆にこの指定をしておかないと強制的に公開されていまします。

以下のように、

https://github.com/tsumikiinc/gulpfiles/blob/master/package.json#L19

好きなプロパティ名で定義して gulpfile.js などで require して利用できます。

todo

• gulp-sequence と sequence どちらがいいか？
• gulp.watch(['./' + CONFIG.SRC + '/**/*.coffee'], ['browserify', reload]); ここは watchify でやりたい
• build ディレクトリは必要か？ dst だけにしてソースマップ利用のほうがいいか？

[takamat]

@sugarshin

gulp-sequence と sequence どちらがいいか？

gulp-sequenceを使う場合とsequenceを使う場合だと何が違うんでしょう？ あと、run-sequenceともまた違うんでしょうか？

[sugarshin]

@k-takam まちがえました、 run-sequence のことを言ってました。高松さんが run-sequence 使ってるみたいなのでどうなのかなと思いました。

[takamat]

@sugarshin 僕の場合、run-sequenceがメジャーだった（DL数が多い）ので使っていたんですが、動作的にはどうなんでしょう？ 見た感じやれることは変わらないように思うのですが。 変わらないなら、どちらでもいいかなと思います。

[sugarshin]

@k-takam ですね、好きなほうでいいですかね。 run-sequence 良さげなので試してみます。

[takamat]

@sugarshin

gulp.watch(['./' + CONFIG.SRC + '/**/*.coffee'], ['browserify', reload]); ここは watchify でやりたい

僕もwatchify でやりたいです。

build ディレクトリは必要か？ dst だけにしてソースマップ利用のほうがいいか

僕の場合、 sass から css にコンパイル → Autoprefixer → minify とやるとソースマップがずれてしまいました。 Autoprefixer を使わない場合は問題ないんですが。。

あと、 src と build で分けた場合、画像などの固定リソースはどちらに入れてます？ src に画像を入れておいて build にコピーするのではなく、最初から build に入れておく感じでしょうか？

[ykob]

タスクランナーは明るくないうえ個人的なこだわりもないので、（sassとuglifyが最低あればいいです） 他に拘りあるようであれば僕はそれに乗っかります。

gulp-sequence と sequence どちらがいいか？ gulp.watch(['./' + CONFIG.SRC + '/*/.coffee'], ['browserify', reload]); ここは watchify でやりたい

これはいずれも使用したことがないのでお任せします。

build ディレクトリは必要か？ dst だけにしてソースマップ利用のほうがいいか？

明確な役割があればbuildとdstわけるのはいいと思いますが、 フォーマットが複雑化して個々案件ごとにいじる部分が増えるようならシンプルなほうがいいです。

[sugarshin]

@k-takam

僕の場合、 sass から css にコンパイル → Autoprefixer → minify とやるとソースマップがずれてしまいました。

そうなんですね。 js もソースマップを生成してデバッグしてます？

あと、 src と build で分けた場合、画像などの固定リソースはどちらに入れてます？ src に画像を入れておいて build にコピーするのではなく、最初から build に入れておく感じでしょうか？

ぼくは src, dst , build の構成としたときは、 dst に画像を入れて、 iamgemin 等で build へ生成させていました。意味的には src から dst に imagemin させて、 ビルド時には build へコピーみたいな流れが正しそうですけどね。

@ykob

明確な役割があればbuildとdstわけるのはいいと思いますが、 フォーマットが複雑化して個々案件ごとにいじる部分が増えるようならシンプルなほうがいいです。

dst と build と用途としては、 dst はプリプロセッサなどのコンパイル結果を吐き出す場所で、ミニファイなどはせず、デバッグのしやすさを意識しています。

build はあくまで納品用、プロダクション用みたいなイメージですね。各種ミニファイを施したものです。なので本来なら gitignore してコミットしないのが正しいんだと思いますが、案件によって、差分ファイルを抽出しないといけない場合があるので、これもコミットファイルに含めるようにしています。

[takamat]

@sugarshin

そうなんですね。 js もソースマップを生成してデバッグしてます？

browserify の debug オプションでソースマップだしてます。 sass はソースマップなくても気にしないですが、AltJS + browserify だとソースマップがないと僕はきつかったです。

[ykob]

build はあくまで納品用、プロダクション用みたいなイメージですね。各種ミニファイを施したものです。

納品用という役割は明確でいいですね。であればアリがいいと思いました。

[sugarshin]

バージョン2を作成しました。 https://github.com/tsumikiinc/gulpfiles/tree/v2

全体の構成を変え、わかりやすさと効率化したのと、 Browserify の複数ファイル吐き出し対応などです。あとは、 gulp 3.9 から Babel 対応になったので、 ES6 で書くようにしてあります。 ES6を試したり、慣れたりするためにもいい機会だと思います。

今の master のものは v1 ブランチに移動し、上記を master にしたいと思うので、確認だけお願いします。

[ykob]

クローンして動作確認します！