web-dev-qa-db-ja.com

Gulpとスクリプトを順につなげる

たとえば、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/'));
});

私はsource/index.html内のスクリプトの正しい順序を持っていますが、ファイルはアルファベット順に整理されているので、gulpはunderscore.jsの後にbackbone.jsを連結し、そして私のsource/index.html内のスクリプトの順序は関係ありません。

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

私が持っている最良のアイデアはそれらに正しい順序を与えるために1、2、3でベンダスクリプトを改名することですが、私はこれが好きかどうかわかりません。

私が学んだことの多くを学んだように、私はBrowserifyが素晴らしい解決策であると感じました、それは最初は苦痛になることができます、しかしそれは素晴らしいです。

javascriptgulp
185
Michael Joseph Aubry

私のAngularJSアプリをビルドするとき、私は最近Gruntと同じ問題を抱えていました。これが 質問 です。

私がやってしまったのは、grunt configでファイルを順番に明示的にリストすることです。だからそれはように見えた：

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

そして物事はうまくいった。そしてGruntは同じファイルを二度含めないように十分に賢いのです。

これはGulpでも同じように機能します。

194
Chad Johnson

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

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

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

132
OverZealous

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

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

12
SuperIRis

sort-stream はgulp.srcを持つファイルの特定の順序を保証するためにも使用できます。常に最後のファイルとしてbackbone.jsを置くサンプルコード：

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/'));
});
6
fracz

私は自分のスクリプトを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を使用する方が良いでしょう。

5
prograhammer

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

0_normalize.scss
1_tikitaka.scss
main.scss

問題なく動作します。

4
user3360496

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'))
});
2
Code Bling

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

お役に立てれば！

1
VinegarStrokes

merge2 現時点では唯一の作業中のメンテナンスされた順序付きストリームマージツールのように見えます。

1
Aliaksandr Shutau

私はただgulp-angular-filesortを使います

function concatOrder() {

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

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

私はこのページからいくつかの解決策を試しましたが、どれもうまくいきませんでした。 concat()にパイプされたときにそれらが同じ順序になるように、私はアルファベット順のfoldernameによって単に順序付けされたかった一連の番号付きファイルを持っていました。つまり、グロブ入力の順序を維持します。簡単でしょ？

これが私の特定の概念実証コードです（printはcliに表示される順番を見るためだけのものです）。

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の狂気の理由は？私は、sleep()関数を使って（indexを指定してsleeptimeをインクリメントする）gulp.src関数を使うことができたときに.mapが非同期で実行されていると判断しました。

srcの非同期の結果は、ファイル数の多いディレクトリの後にファイル数の多いディレクトリが続くことを意味します。これは、処理に時間がかかるためです。

0
Jeremy John

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

私がしたこと：

  1. すべてのスクリプトをsrcフォルダーに移動します
  2. coreディレクトリをgulp-renameに_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つのモジュールです。

0
soyuka

私のgulp設定では、最初にベンダーファイルを指定し、次に（より一般的な）すべてのものを指定します。そしてそれは首尾よく他の注文のものの前にベンダーjsを置きます。

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

もしあなたがサードパーティライブラリの依存関係を注文したいのなら、 wiredep を試してください。このパッケージは基本的にbower.jsonの各パッケージ依存関係をチェックしてからそれらをあなたのために結び付けます。

0
zak.http