Конкат скрипты по порядку с глотком

еще одна вещь, которая помогает, если вам нужны некоторые файлы, чтобы прийти после большой двоичный объект файлов, чтобы исключить определенные файлы из вашего глобуса, например:

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

вы можете объединить это с указанием файлов, которые должны быть первыми, как описано в ответе чада Джонсона.

я использовал плагин 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>

в вашем каталоге сборки вы будете иметь ссылку на main.минута.js, который будет содержать поставщика.Яш, тест.js, и главное.js

The 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 добавлено для демонстрационных целей заказа. Вероятно, лучше использовать CDNs для тех, кто так широко используется, и браузеры могут уже кэшировать их с других сайтов.

Я просто добавляю числа в начало имени файла:

0_normalize.scss
1_tikitaka.scss
main.scss

Он работает в глотке без каких-либо проблем.

попробовать stream-series. Он работает как merge-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

надеюсь, что это помогает!

Я имел 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/'));
}

Я нахожусь в модуле environnement, где все являются основными зависимыми, используя gulp. Итак,core модуль должен быть добавлен перед другим.

что я сделал:

1. переместить все скрипты в src папку
2. просто gulp-rename код

Если вы хотите заказать зависимости сторонних библиотек, попробуйте wiredep. Этот пакет в основном проверяет каждую зависимость пакета в bower.затем json свяжет их для вас.

merge2 выглядит как единственный работающий и поддерживаемый упорядоченный инструмент слияния потоков на данный момент.

я попробовал несколько решений с этой страницы, но ни один не работал. У меня была серия пронумерованных файлов, которые я просто хотел упорядочить по алфавитному имени папки, поэтому при передаче в concat() они будут в том же порядке. То есть, сохранить порядок подстановка ввода. Полегче, Да?

вот мой конкретный концептуальный код (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? Я решил, что gulp.src был запуск асинхронного, когда я смог использовать