質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,239

score 16

 やりたい事

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の場合、例えば2つの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を2つ作りたい場合gulpfile.jsに読み込みjsを1つづつ列挙していくにもスマートでない気がするので、

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/29 17:39

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る