Gulpを使用したスクリプトの連結

たとえば、バックボーンなどでプロジェクトを構築していて、スクリプトを特定の順序でロードする必要があるとします。 underscore.jsロードする必要があるとしますbackbone.js。前にロードする必要があります。

スクリプトを連結して正しい順序にするにはどうすればよいですか？

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
    gulp.src(['./source/js/*.js', './source/js/**/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});

私のにはスクリプトの正しい順序がありsource/index.htmlますが、ファイルはアルファベット順に整理されているため、gulpはunderscore.js後に連結しますbackbone.jsに、私のスクリプトの順序はsource/index.html重要ではないため、ディレクトリ内のファイルを調べます。

それで誰かがこれについて考えを持っていますか？

私が持っている最高のアイデアは、ベンダースクリプトの名前を1、2、3それらを適切な順序を与えることが、私はこれが好きかどうかはわかりません。

さらに知りながら、Browserifyは優れたソリューションであることを発見しました。最初は面倒なことかもしれませんが、素晴らしいものです。

AngularJSアプリをビルドするときに、最近Gruntで同様の問題が発生しました。これが私が投稿した質問です。

私がやったことは、grunt configに順番にファイルを明示的にリストすることです。設定ファイルは次のようになります。

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

Gruntはどのファイルが重複しているかを把握し、それらを含めないようにすることができます。同じテクニックがGulpでも機能します。

ファイルのブロブの後にいくつかのファイルが必要な場合に役立つもう1つのことは、次のように特定のファイルをグロブから除外することです。

[
  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js
  '/src/js/foobar.js',
]

これを、Chad Johnsonの回答で説明されているように、最初に来る必要があるファイルの指定と組み合わせることができます。

私はgulp-orderプラグインを使用しましたが、私のスタックオーバーフローポストgulp-orderノードモジュールでマージされたストリームを見るとわかるように、それは常に成功するとは限りません。Gulpのドキュメントを閲覧しているときに、私の場合は連結の順序を指定するのに非常に効果的なstreamqueモジュールに出くわしました。https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

私の使用例は以下のとおりです

var gulp         = require('gulp');
var concat       = require('gulp-concat');
var handleErrors = require('../util/handleErrors');
var streamqueue  = require('streamqueue');

gulp.task('scripts', function() {
    return streamqueue({ objectMode: true },
        gulp.src('./public/angular/config/*.js'),
        gulp.src('./public/angular/services/**/*.js'),
        gulp.src('./public/angular/modules/**/*.js'),
        gulp.src('./public/angular/primitives/**/*.js'),
        gulp.src('./public/js/**/*.js')
    )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public/build/js'))
        .on('error', handleErrors);
});

gulp-userefを使用すると、インデックスファイルで宣言されたすべてのスクリプトを、宣言した順序で連結できます。

https://www.npmjs.com/package/gulp-useref

var $ = require('gulp-load-plugins')();
gulp.task('jsbuild', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

そして、HTMLでは、次のように、生成するビルドファイルの名前を宣言する必要があります。

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

ビルドディレクトリには、vendor.js、test.js、main.jsを含むmain.min.jsへの参照があります。

ソート・ストリームはまた、とのファイルの特定の順序を保証するために使用することができますgulp.src。backbone.jsalwaysを最後のファイルとして処理するサンプルコード：

var gulp = require('gulp');
var sort = require('sort-stream');
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
  .pipe(sort(function(a, b){
    aScore = a.path.match(/backbone.js$/) ? 1 : 0;
    bScore = b.path.match(/backbone.js$/) ? 1 : 0;
    return aScore - bScore;
  }))
  .pipe(concat('script.js'))
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./build/js/'));
});

ファイル名の先頭に数字を追加するだけです：

0_normalize.scss
1_tikitaka.scss
main.scss

問題なく一気に動作します。

私は、bowerから取得したパッケージごとに異なるフォルダーにスクリプトを整理し、さらにアプリ用に独自のスクリプトを用意しています。これらのスクリプトの順序をどこかにリストするつもりなので、gulpファイルにリストするだけではどうですか。プロジェクトの新しい開発者にとって、すべてのスクリプトエンドポイントがここにリストされていると便利です。これはgulp-add-srcで行うことができます：

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src'),
    sourcemaps = require('gulp-sourcemaps');

// CSS & Less
gulp.task('css', function(){
    gulp.src('less/all.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('source-maps'))
        .pipe(gulp.dest('public/css'));
});

// JS
gulp.task('js', function() {
    gulp.src('resources/assets/bower/jquery/dist/jquery.js')
    .pipe(addsrc.append('resources/assets/bower/bootstrap/dist/js/bootstrap.js'))
    .pipe(addsrc.append('resources/assets/bower/blahblah/dist/js/blah.js'))
    .pipe(addsrc.append('resources/assets/js/my-script.js'))
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('default',['css','js']);

注：注文のデモンストレーション目的で追加されたjQueryおよびBootstrap。CDNは非常に広く使用されており、ブラウザはすでに他のサイトからキャッシュされている可能性があるため、これらのCDNを使用する方が良いでしょう。

stream-seriesを試してください。merge-stream / event-stream.merge（）のように機能しますが、インターリーブの代わりに末尾に追加する点が異なります。streamqueueのようにオブジェクトモードを指定する必要がないので、コードがよりクリーンになります。

var series = require('stream-series');

gulp.task('minifyInOrder', function() {
    return series(gulp.src('vendor/*'),gulp.src('extra'),gulp.src('house/*'))
        .pipe(concat('a.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

merge2は、現時点で動作し、維持されている唯一の順序付けられたストリームマージツールのように見えます。

アップデート2020

APIは常に変化しており、一部のライブラリは使用できなくなったり、脆弱性が含まれたり、依存関係に脆弱性が含まれているため、何年も修正されていません。テキストファイルの操作のためには、より良い使用カスタムNodeJSスクリプトなどの人気ライブラリいただきたいglobbyとfs-extraガルプ、うなり声のない他のライブラリなどラッパーと一緒に。

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

別の方法は、この問題のために特別に作成されたGulpプラグインを使用することです。https://www.npmjs.com/package/gulp-ng-module-sort

それを追加することでスクリプトをソートすることができます.pipe(ngModuleSort())：

var ngModuleSort = require('gulp-ng-module-sort');
var concat = require('gulp-concat');

gulp.task('angular-scripts', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe(ngModuleSort())
        .pipe(concat('angularAppScripts.js))
        .pipe(gulp.dest('./dist/));
});

次のディレクトリ規則を想定しています。

|——— src/
|   |——— app/
|       |——— module1/
|           |——— sub-module1/
|               |——— sub-module1.js
|           |——— module1.js
|       |——— module2/
|           |——— sub-module2/
|               |——— sub-module2.js
|           |——— sub-module3/
|               |——— sub-module3.js
|           |——— module2.js
|   |——— app.js

お役に立てれば！

私にとって、ファイルを並べ替えるパイプにnatualSort（）とangularFileSort（）がありました。私はそれを削除し、今それは私のためにうまくいきます

$.inject( // app/**/*.js files
    gulp.src(paths.jsFiles)
      .pipe($.plumber()), // use plumber so watch can start despite js errors
      //.pipe($.naturalSort())
      //.pipe($.angularFilesort()),
    {relative: true}))

私はgulp-angular-filesortを使用します

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}

私はすべてgulpを使用してコアに依存するモジュール環境にいます。したがって、coreモジュールは他のモジュールの前に追加する必要があります。

私がしたこと：

1. すべてのスクリプトをsrcフォルダーに移動する
2. ちょうどgulp-renameあなたのcoreディレクトリに_core

3. gulpはの順序を維持していますgulp.src。私の連結srcは次のようになります。

   concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

_リストの最初のディレクトリとして当然のことです（自然な並べ替え？）。

注（angularjs）：次に、gulp -angular-extenderを使用して、モジュールをモジュールに動的に追加しますcore。コンパイルすると次のようになります。

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

ここで、AdminとProductsは2つのモジュールです。

サードパーティライブラリの依存関係を注文する場合は、wiredepを試してください。このパッケージは基本的に、bower.jsonの各パッケージの依存関係をチェックしてから、それらを配線します。

このページからいくつかの解決策を試しましたが、どれもうまくいきませんでした。一連の番号付きファイルがあり、それらを単純にアルファベット順のフォルダー名でconcat()並べ替えたいので、それらをパイプ処理すると同じ順序になります。つまり、グロビング入力の順序を保持します。簡単ですよね？

これが私の具体的な概念実証コードです（printCLIに印刷された注文を確認するためだけです）。

var order = require('gulp-order');
var gulp = require('gulp');
var print = require('gulp-print').default;

var options = {};

options.rootPath = {
  inputDir: process.env.INIT_CWD + '/Draft',
  inputGlob: '/**/*.md',
};

gulp.task('default', function(){
  gulp.src(options.rootPath.inputDir + options.rootPath.inputGlob, {base: '.'})
    .pipe(order([options.rootPath.inputDir + options.rootPath.inputGlob]))
    .pipe(print());
});

の狂気の理由はgulp.src？関数gulp.srcを使用してsleep()（.mapインデックスでインクリメントされたスリープ時間を使用して）ストリーム出力を適切に順序付けることができたときに、非同期で実行していると判断しました。

srcより多くのファイルを持つ平均dirs の非同期の結果は、処理に時間がかかるため、より少ないファイルを持つdirsの後に発生しました。

私のgulpセットアップでは、最初にベンダーファイルを指定し、次に（より一般的な）すべてを指定しています。そしてそれは他のカスタムのものの前にベンダーjsをうまく配置します。

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    

どうやら「nosort」オプションをgulp.src gulp.srcに渡すことができます。