たとえば、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が素晴らしい解決策であると感じました、それは最初は苦痛になることができます、しかしそれは素晴らしいです。
私のAngularJSアプリをビルドするとき、私は最近Gruntと同じ問題を抱えていました。これが 質問 です。
私がやってしまったのは、grunt configでファイルを順番に明示的にリストすることです。だからそれはように見えた:
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]
そして物事はうまくいった。そしてGruntは同じファイルを二度含めないように十分に賢いのです。
これはGulpでも同じように機能します。
いくつかのファイルが必要になった場合に役立つもう1つのことは、afterファイルの塊であるため、グロブから特定のファイルを除外することです。
[
'/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への参照があります。
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/'));
});
私は自分のスクリプトを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を使用する方が良いでしょう。
ファイル名の先頭に数字を追加するだけです。
0_normalize.scss
1_tikitaka.scss
main.scss
問題なく動作します。
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'))
});
別の方法はこの問題のために特別に作成された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
お役に立てれば!
merge2 現時点では唯一の作業中のメンテナンスされた順序付きストリームマージツールのように見えます。
私はただgulp-angular-filesortを使います
function concatOrder() {
return gulp.src('./build/src/app/**/*.js')
.pipe(sort())
.pipe(plug.concat('concat.js'))
.pipe(gulp.dest('./output/'));
}
私にとっては、ファイルを並べ替えるパイプ内に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}))
私はこのページからいくつかの解決策を試しましたが、どれもうまくいきませんでした。 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
の非同期の結果は、ファイル数の多いディレクトリの後にファイル数の多いディレクトリが続くことを意味します。これは、処理に時間がかかるためです。
私はすべてがgulpを使ったコア依存のモジュール環境にいます。そのため、core
モジュールを他のモジュールの前に追加する必要があります。
私がしたこと:
src
フォルダーに移動しますcore
ディレクトリをgulp-rename
に_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つのモジュールです。
私のgulp設定では、最初にベンダーファイルを指定し、次に(より一般的な)すべてのものを指定します。そしてそれは首尾よく他の注文のものの前にベンダーjsを置きます。
gulp.src([
// vendor folder first
path.join(folder, '/vendor/**/*.js'),
// custom js after vendor
path.join(folder, '/**/*.js')
])
もしあなたがサードパーティライブラリの依存関係を注文したいのなら、 wiredep を試してください。このパッケージは基本的にbower.jsonの各パッケージ依存関係をチェックしてからそれらをあなたのために結び付けます。