gulpでscssのようにjsを選択結合したい

Question

やりたい事

gulpを使ってjsを結合する際、結合ファイルや結合順序を細やかに設定したい。

###現状
現在gulpを使いcss/jsを結合・コンパイルしています。

例えばディレクトリ構造が

dir/assets/css ・・・出力css
dir/assets/js ・・・出力js
dir/src/js ・・・・・被結合js
dir/src/scss・・・・・scss

のような構造でgulpfile.jsに

gulp.task('concat', function() {
    console.log('------concat----------');
	  return gulp.src('dir/src/js/*.js')
	    .pipe(concat('app.js'))
	    .pipe(gulp.dest('dir/assets/js'));
});

にしてdir/src/js内のjsを結合しています。
ここに依存関係、例えば、jsに依存関係がある場合は
gulp.src(['dir/src/js/vendor/*.js','dir/src/js/vendor/**/*.js','dir/src/js/*.js'])
などと結合順序を階層で差をつけて結合しています。

scssの場合、例えば２つのcss（style.cssとstyle2.css）を作りたい場合

_common.scss
_foo.scss
_bar.scss
_hoge.scss

上記のようなファイルがあったとして
#style.scss

@import "common";
@import "foo";
@import "bar";

#style2.scss

@import "common";
@import "hoge";

のようにする事で
style.css、style2.scssには必要な内容だけのcss希望する順番でコンパイルできる。

上記のgulpを使ったjsの結合処理でも結合順序や結合するjsファイルを細やかにしていする方法はないんでしょうか？

app.jsは下記の順で
jquery
jquery-ui

app2.jsは下記の順で
jquery
FlexSlider

※）実際にはそれぞれもっと多くのjsを結合する事が多いと思う。

といったjsを２つ作りたい場合gulpfile.jsに読み込みjsを１つづつ列挙していくにもスマートでない気がするので、

どのファイルをどういう順番で結合し、何という名前のjsファイルを出力する

といった設定をするような方法は無いものでしょうか？

作るサイトがどのページも似たような処理でjsも１種類で良い場合問題ではないのですが、このページではapp.jsを使いたい、このページではapp2.jsが使いたいなどという場合不便さを感じています。

Answer 1

Node.jsに乗り換えましょう。
browserifyやwebpackを扱えるようになるので、
それで目的通りの事が出来ます。

JavaScript→Browserifyの歴史をざっくり紹介

• GoogleがGoogleMap作ってJavaScriptすげーAjaxすげーってなる
• 皆が触るがAjaxの実現が面倒過ぎる
• jQueryが登場してAjaxを使ったリッチなサイトが簡単に作れるように
• 各社ブラウザーがJavaScriptのエンジンを弄る。「うちのブラウザーのJavaScriptエンジンは他社製品より50%高速だよ！」
• GoogleがV8エンジンをオープンソースとして公開
• JavaScriptはすげー良くなった。サーバーサイドでも使いたい（でもファイルシステムも通信もないじゃんどうすんの）
• CommonJS「requireという仕組み思いついたよ」
• Node.js「おっ、その構想もらい。V8エンジンに自前実装のC++でファイルシステムや通信機能付け足して出すわ」
• エンジニア「Node.jsの機能が便利過ぎてJavaScript辛い、なんとかならんか？」

こうして出来たbrowserifyやwebpackは、Node.jsのスクリプトをJavaScriptにコンパイル（？）することが出来ます。
独自実装のrequire関数を宣言し、依存先のファイルを同じJSファイルに詰め込むという作戦でJavaScriptでの依存ライブラリを解決します。

Comments

[move]

ありがとうございます、歴史的な背景もあり、いろいろな記事を読んだり、自機にインストールしているnode.jsのバージョンも古かったので、nodebrewで入れ直したりしながら、環境構築に時間がかかりましたが、なんとかできました。便利そうですが、次はnpmのパッケージ使うのかbowerのパッケージ使うのかの部分で悩みそうです(ー_ー;)、requireできる事は大変便利ですね！！

今までbowerで全ての必要パッケージ管理していたのでそのあたりもうちょっと調べてみます。