it-swarm.com.ru

Скрипты Concat в порядке с 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 - отличное решение, поначалу это может быть больно, но это здорово.

181
Michael Joseph Aubry

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

В итоге я явно перечислил файлы по порядку в конфиге grunt. Так это выглядело так:

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

И все заработало. И Грант, по-видимому, достаточно умен, чтобы не включать один и тот же файл дважды.

Это работает так же с Gulp.

189
Chad Johnson

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

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

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

131
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>

В вашем каталоге сборки у вас будет ссылка на main.min.js, которая будет содержать vendor.js, test.js и main.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

Работает глотком без проблем.

3
user3360496

Попробуйте поток-серия . Он работает как 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
Alexander Shutov

Я просто использую 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() они будут в том же порядке. То есть, сохранить порядок ввода ввода. Легко, правда?

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

0
Jeremy John

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

Что я сделал:

  1. Переместите все сценарии в папку src
  2. Просто gulp-rename ваш каталог core для _core
  3. gulp сохраняет порядок вашего gulp.src, мой concat 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 - это два модуля.

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