Скрипты Concat в порядке с Gulp

Ответ 1

Недавно у меня была похожая проблема с Grunt при создании моего приложения AngularJS. Вот вопрос, который я написал.

В итоге я явно перечислил файлы по порядку в конфиге grunt. Файл конфигурации будет выглядеть следующим образом:

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

Grunt может выяснить, какие файлы являются дубликатами, и не включать их. Та же самая техника будет работать и с Gulp.

Ответ 2

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

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

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

Ответ 3

Я использовал плагин gulp -order, но он не всегда успешный, поскольку вы можете видеть мой пост gulp -order node модуль с объединенными потоками. При просмотре документов Gulp я столкнулся с быстрым модулем, который работал достаточно хорошо для указания порядка в моем случае конкатенации. 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);
});

Ответ 4

С помощью gulp -useref вы можете объединить каждый script, объявленный в вашем индексном файле, в том порядке, в котором вы его объявляете.

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.min.js, который будет содержать vendor.js, test.js и main.js

Ответ 5

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

У меня есть мои сценарии, организованные в разных папках для каждого пакета, который я втягиваю из беседки, плюс мой собственный script для моего приложения. Поскольку вы собираетесь где-то перечислять порядок этих скриптов, почему бы просто не перечислить их в вашем файле gulp? Для новых разработчиков в вашем проекте, хорошо, что все ваши конечные точки script перечислены здесь. Вы можете сделать это с помощью 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 для них, поскольку они настолько широко используются, и браузеры могут их кэшировать с других сайтов уже.

Ответ 7

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

0_normalize.scss
1_tikitaka.scss
main.scss

Он работает в gulp без проблем.

Ответ 8

Попробуйте 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'))
});

Ответ 9

Альтернативным методом является использование плагина 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

Надеюсь, это поможет!

Ответ 10

Для меня у меня были 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}))

Ответ 11

Я просто использую gulp - angular -filesort

function concatOrder() {

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

Ответ 12

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

Ответ 13

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

Что я сделал:

• Переместите все сценарии в папку src
• Просто gulp-rename ваш каталог core на _core

• gulp сохраняет порядок вашего gulp.src, мой concat src выглядит следующим образом:

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

Очевидно, что это будет _ как первый каталог из списка (естественный sort?).

Примечание (угловая): Затем я использую gulp-angular-extender для динамического добавления модулей в модуль core. Скомпилировано оно выглядит так:

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

Если администратор и продукты - это два модуля.

Ответ 14

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

Ответ 15

Я пробовал несколько решений с этой страницы, но ни одно из них не сработало. У меня был ряд пронумерованных файлов, которые я просто хотел упорядочить по алфавитному имени, поэтому при передаче в concat 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 работает асинхронно, когда я смог использовать функцию sleep() (используя .map с временем ожидания, увеличенным на индекс), чтобы упорядочить вывод потока должным образом.

Результатом асинхронизации src означают, что каталоги с большим количеством файлов находятся после директорий с меньшим количеством файлов, потому что для их обработки потребовалось больше времени.

Ответ 16

В моей настройке gulp я сначала указываю файлы вендора, а затем указываю (более общее) все, во-вторых. И это успешно ставит поставщика JS перед другими пользовательскими вещами.

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

Ответ 17

По-видимому, вы можете передать опцию "nosort" gulp.src gulp.src.