javascript - Gulp でスクリプトを順番に連結する

Question

たとえば、Backbone などでプロジェクトをビルドしていて、特定の順序でスクリプトをロードする必要があるとします。たとえば、の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/'));
});

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

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

私が持っている最善のアイデアは、ベンダースクリプトの名前を , , に変更1し2て3適切な順序にすることですが、これが気に入るかどうかはわかりません。

詳細を学ぶにつれて、Browserify が優れたソリューションであることがわかりました。最初は面倒かもしれませんが、素晴らしいです。

score 204 · Accepted Answer

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

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

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

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

score 18 · Accepted Answer

私は 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);
});

score 14 · Accepted Answer

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

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

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 への参照があります。

score 1 · Accepted Answer

私にとっては、ファイルを並べ替えていたパイプに 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}))

score 1 · Accepted Answer

gulp-angular-filesort を使用するだけです

function concatOrder() {

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

score 1 · Accepted Answer

別の方法は、この問題のために特別に作成された 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

お役に立てれば！

score 0 · Accepted Answer

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

私がしたこと：

すべてのスクリプトをsrcフォルダーに移動する
gulp-renameあなたのcoreディレクトリだけに_core
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 つのモジュールです。

score 0 · Accepted Answer

0

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

于 2019-10-15T21:15:20.647 に答える

javascript - Gulp でスクリプトを順番に連結する

17 に答える 17

Related

Reference