Gulp ile concat komut dosyaları

Örneğin, Omurga veya başka bir şey üzerinde bir proje oluşturduğunuzu ve komut dosyalarını belirli bir sırayla yüklemeniz gerekiyor, örneğin underscore.jsdaha önce yüklenmesi gerekiyor backbone.js.

Senaryoları sıraya koyacak şekilde birleştirmeyi nasıl başarabilirim?

// 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/'));
});

Benim doğru komut dizisi var source/index.html, ama dosyalar alfabetik sıraya göre organize olduğundan, gulp underscore.jssonra concat olacak backbone.jsve benim içinde komut dizisi source/index.htmlönemli değil, dizindeki dosyalara bakar.

Peki bu konuda bir fikri olan var mı?

Ben iyi bir fikir ile satıcı komut dosyalarını yeniden adlandırmak için 1, 2, 3onlara doğru sipariş vermek için, ama böyle ben olmadığından emin değilim.

Daha fazla öğrendiğim gibi Browserify'nin harika bir çözüm olduğunu gördüm, ilk başta acı olabilir ama harika.

AngularJS uygulamamı oluştururken son zamanlarda Grunt ile benzer bir sorun yaşadım. İşte gönderdiğim bir soru .

Ne yaptığım açıkça grunt yapılandırma sırasıyla dosyaları listelemektir. Yapılandırma dosyası şu şekilde görünecektir:

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

Grunt, hangi dosyaların kopya olduğunu ve bunları içermediğini anlayabilir. Aynı teknik Gulp ile de çalışacaktır.

Bir dosya bloğundan sonra gelmek için bazı dosyalara ihtiyacınız varsa yardımcı olan başka bir şey, belirli dosyaları globunuzdan hariç tutmaktır.

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

Bunu Chad Johnson'ın cevabında açıklandığı gibi önce gelmesi gereken dosyalar belirleyerek birleştirebilirsiniz.

Ben gulp sipariş eklentisi kullandım ama birleştirilmiş akışları ile yığın taşma sonrası gulp sipariş düğüm modülü görebileceğiniz gibi her zaman başarılı değildir . Gulp belgelerine göz atarken, benim durumumda birleştirme sırasını belirlemek için oldukça iyi çalışmış olan streamque modülüne rastladım. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Nasıl kullandığımın örneği aşağıda

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 ile dizin dosyanızda bildirilen her komut dosyasını, bildirdiğiniz sırayla birleştirebilirsiniz.

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'de, oluşturmak istediğiniz derleme dosyasının adını şu şekilde bildirmeniz gerekir:

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

Derleme dizininizde vendor.js, test.js ve main.js dosyasını içeren main.min.js referansına sahip olacaksınız.

Sort-akışı da sahip dosyaların belirli düzen sağlamak için kullanılabilir gulp.src. backbone.jsHer zaman işlenecek son dosya olarak yerleştiren örnek kod :

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/'));
});

Sadece dosya adının başına rakamlar ekliyorum:

0_normalize.scss
1_tikitaka.scss
main.scss

Sorunsuz bir şekilde yırtıcı olarak çalışır.

Senaryolarımı bower'dan aldığım her paket için farklı klasörlerde organize ettim, ayrıca uygulamam için kendi script'im Bu betiklerin sırasını bir yerde listeleyeceğiniz için, neden sadece gulp dosyanızda listelemiyorsunuz? Projenizdeki yeni geliştiriciler için, tüm komut dosyası uç noktalarınızın burada listelenmesi güzel. Bunu gulp-add-src ile yapabilirsiniz :

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']);

Not: Siparişin gösterilmesi amacıyla jQuery ve Bootstrap eklendi. Çok yaygın olarak kullanıldıkları ve tarayıcıların bunları zaten diğer sitelerden önbelleğe alabildikleri için CDN'leri kullanmak muhtemelen daha iyidir.

Akış serisini deneyin . Birleştirme-akışı / event-stream.merge () gibi çalışır , ancak serpiştirme yerine sonuna eklenir . Akış modu gibi nesne modunu belirtmenizi gerektirmez , bu nedenle kodunuz daha temiz görünür .

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'))
});

merge2 şu anda çalışan ve bakımı yapılmış tek düzenli akış birleştirme aracı gibi görünüyor.

2020 Güncellemesi

API'ler her zaman değişiyor, bazı kütüphaneler kullanılamıyor veya güvenlik açıkları içeriyor veya bağımlılıkları yıllarca düzeltilmeyen güvenlik açıkları içeriyor. Metin dosyaları manipülasyonları için, özel NodeJS komut dosyalarını ve Gulp, Grunt vb. Sarmalayıcıları olmayan diğer kitaplıklar gibi globbyve bunlarla fs-extrabirlikte popüler kitaplıkları kullanmanız daha iyi olur .

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

Alternatif bir yöntem, bu sorun için özel olarak oluşturulan bir Gulp eklentisi kullanmaktır. https://www.npmjs.com/package/gulp-ng-module-sort

Komut dosyalarınızı aşağıdaki .pipe(ngModuleSort())gibi bir ekleyerek sıralamanızı sağlar :

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/));
});

Bir dizin kuralını varsayarsak:

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

Bu yardımcı olur umarım!

Benim için borularda dosyaları yeniden sıralayan natualSort () ve angularFileSort () vardı. Kaldırdım ve şimdi benim için iyi çalışıyor

$.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}))

Ben sadece gulp-açısal-filesort

function concatOrder() {

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

Ben tüm yudum kullanarak çekirdek bağımlıları olan bir modül ortamında. Bu nedenle, coremodülün diğerlerinden önce eklenmesi gerekir.

Ben ne yaptım:

1. Tüm komut dosyalarını bir srcklasöre taşıma
2. Sadece gulp-renamesenin coredizin_core

3. yutmak senin sırasını gulp.srckoruyor, benim concat srcşöyle görünür:

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

Açıkça _listeden ilk dizin olarak alacaktır (doğal sıralama?).

Not (angularjs): Modülleri modüle dinamik olarak eklemek için gulp -angular-extender kullanıyorum core. Derlenmiş gibi görünüyor:

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

Yönetici ve Ürünler iki modüldür.

üçüncü taraf kitaplık bağımlılıkları sipariş etmek istiyorsanız, wiredep'i deneyin . Bu paket temel olarak bower.json'daki her paket bağımlılığını kontrol eder ve sonra bunları sizin için kablolar.

Bu sayfadan birkaç çözüm denedim, ancak hiçbiri işe yaramadı. Alfabetik katlama adı ile sipariş edilmesini istediğim bir dizi numaralı dosyam vardı, bu yüzden concat()aynı sırada sıralanırlardı. Yani, globbing girdisinin sırasını koruyun. Kolay değil mi?

İşte benim özel kavram kanıtı kodum ( printsadece klibe yazdırılan sırayı görmek için):

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());
});

Deliliğin sebebi gulp.src? Akış çıktısını düzgün bir şekilde sipariş gulp.srcetmek için bir sleep()işlevi ( .mapindeks tarafından artırılan bir uyku zamanı kullanarak) kullanabildiğimde zaman uyumsuz çalıştığını belirledim .

Arasında zaman uyumsuz ortaya attığı, srcİşlenmesi uzun sürdü çünkü daha dosyalarla ortalama dirs, daha az dosyalarla dirs sonra geldi.

Benim yutturmaca kurulumda, önce satıcı dosyalarını ve sonra (daha genel) her şeyi, ikinci olarak belirtiyorum. Ve başarıyla satıcı js diğer özel şeylerden önce koyar.

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

Görünüşe göre "nosort" seçeneğini gulp.src gulp.src'ye iletebilirsiniz .