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

javascript gulp

111214 просмотра

17 ответа

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

Автор: Michael Joseph Aubry Источник Размещён: 13.11.2019 11:33

Ответы (17)


195 плюса

Решение

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

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

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

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

Автор: Chad Johnson Размещён: 22.02.2014 10:05

134 плюса

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

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

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

Автор: OverZealous Размещён: 22.02.2014 10:12

17 плюса

Я использовал плагин 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);
});
Автор: dtothefp Размещён: 07.05.2014 02:45

12 плюса

С помощью 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

Автор: SuperIRis Размещён: 01.02.2015 05:37

6 плюса

Поток сортировки также может использоваться для обеспечения определенного порядка файлов с 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/'));
});
Автор: fracz Размещён: 26.08.2014 08:38

5 плюса

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

Автор: prograhammer Размещён: 02.07.2015 02:27

4 плюса

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

0_normalize.scss
1_tikitaka.scss
main.scss

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

Автор: user3360496 Размещён: 12.03.2014 11:11

3 плюса

Попробуйте потоковую серию . Он работает как 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'))
});
Автор: Code Bling Размещён: 13.07.2015 04:35

1 плюс

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

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

Автор: Oak Размещён: 23.10.2015 07:44

1 плюс

Для меня у меня были 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}))
Автор: casper123 Размещён: 15.03.2016 12:34

1 плюс

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

Автор: Alexander Shutau Размещён: 26.06.2017 02:36

1 плюс

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

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}
Автор: Maccurt Размещён: 04.08.2016 03:24

0 плюса

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

Что я сделал:

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

Автор: soyuka Размещён: 12.08.2014 10:37

0 плюса

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

Автор: zak.http Размещён: 16.03.2017 06:26

0 плюса

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

Автор: Jeremy John Размещён: 21.07.2018 03:32

0 плюса

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

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    
Автор: ProGrammar Размещён: 12.12.2018 07:58

0 плюса

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

Автор: Wildhammer Размещён: 15.10.2019 09:15
Вопросы из категории :
32x32