Script concat dalam rangka dengan Gulp

Katakan, misalnya, Anda sedang membangun proyek di Backbone atau apa pun dan Anda perlu memuat skrip dalam urutan tertentu, misalnya underscore.js harus dimuat sebelumnya backbone.js.

Bagaimana cara saya membuatnya untuk skrip sehingga mereka dalam rangka?

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

Saya memiliki urutan skrip yang tepat dalam source/index.htmlfile saya , tetapi karena file disusun berdasarkan urutan alfabet, tegukan akan underscore.jsselesai setelahnya backbone.js, dan urutan skrip pada saya source/index.htmltidak masalah, ia melihat file dalam direktori.

Jadi apakah ada yang punya ide tentang ini?

Ide terbaik yang saya miliki adalah untuk mengubah nama script penjual dengan 1, 2, 3untuk memberi mereka urutan yang tepat, tapi saya tidak yakin apakah saya seperti ini.

Ketika saya belajar lebih banyak, saya menemukan Browserify adalah solusi yang hebat, pada awalnya bisa sangat menyebalkan, tetapi itu bagus.

Saya memiliki masalah yang sama dengan Grunt saat membangun aplikasi AngularJS saya. Ini pertanyaan yang saya posting.

Apa yang akhirnya saya lakukan adalah secara eksplisit mendaftar file-file tersebut dalam konfigurasi kasar. File config kemudian akan terlihat seperti ini:

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

Grunt dapat mengetahui file mana yang merupakan duplikat dan tidak menyertakannya. Teknik yang sama akan bekerja dengan Gulp juga.

Hal lain yang membantu jika Anda memerlukan beberapa file untuk datang setelah gumpalan file, adalah mengecualikan file tertentu dari bola Anda, seperti:

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

Anda dapat menggabungkan ini dengan menentukan file yang harus didahulukan seperti yang dijelaskan dalam jawaban Chad Johnson.

Saya telah menggunakan plugin gulp-order tetapi tidak selalu berhasil seperti yang Anda lihat dengan stack overflow saya pasca modul node gulp-order dengan aliran gabungan . Ketika browsing melalui dokumen Gulp saya menemukan modul streamque yang telah bekerja dengan sangat baik untuk menentukan urutan dalam rangkaian kasus saya.https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Contoh bagaimana saya menggunakannya di bawah ini

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

Dengan gulp-useref, Anda dapat menggabungkan setiap skrip yang dideklarasikan dalam file indeks Anda, sesuai urutan Anda mendeklarasikannya.

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

Dan dalam HTML Anda harus mendeklarasikan nama file build yang ingin Anda hasilkan, seperti ini:

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

Di direktori build Anda, Anda akan memiliki referensi ke main.min.js yang akan berisi vendor.js, test.js, dan main.js

The semacam streaming juga dapat digunakan untuk memastikan urutan tertentu dari file dengan gulp.src. Kode contoh yang menempatkan backbone.jsselalu sebagai file terakhir untuk diproses:

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

Saya hanya menambahkan angka ke awal nama file:

0_normalize.scss
1_tikitaka.scss
main.scss

Ini bekerja dalam tegukan tanpa masalah.

Saya mengatur skrip saya di folder yang berbeda untuk setiap paket yang saya tarik dari bower, ditambah skrip saya sendiri untuk aplikasi saya. Karena Anda akan membuat daftar urutan skrip-skrip ini di suatu tempat, mengapa tidak mencantumkannya dalam file tegukan Anda? Untuk pengembang baru di proyek Anda, senang bahwa semua titik akhir skrip Anda tercantum di sini. Anda dapat melakukan ini dengan 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']);

Catatan: jQuery dan Bootstrap ditambahkan untuk tujuan demonstrasi pesanan. Mungkin lebih baik menggunakan CDN untuk mereka karena CDN itu sudah sangat banyak digunakan dan browser sudah bisa di-cache dari situs lain.

Coba stream-series . Ia bekerja seperti merge-stream / event-stream.merge () kecuali bahwa alih-alih interleaving, ia menambahkan sampai akhir. Itu tidak mengharuskan Anda untuk menentukan mode objek seperti streamqueue , sehingga kode Anda keluar lebih bersih.

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 sepertinya satu-satunya alat penggabungan aliran yang dipesan dan dikelola saat ini.

Perbarui 2020

API selalu berubah, beberapa perpustakaan menjadi tidak dapat digunakan atau mengandung kerentanan, atau dependensinya mengandung kerentanan, yang tidak diperbaiki selama bertahun-tahun. Untuk manipulasi file teks, Anda sebaiknya menggunakan skrip NodeJS khusus dan pustaka populer seperti globbydan fs-extrabersama pustaka lainnya tanpa Gulp, Grunt, dll.

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

Metode alternatif adalah dengan menggunakan plugin Gulp yang dibuat khusus untuk masalah ini. https://www.npmjs.com/package/gulp-ng-module-sort

Ini memungkinkan Anda untuk menyortir skrip Anda dengan menambahkan .pipe(ngModuleSort())seperti:

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

Dengan asumsi konvensi direktori:

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

Semoga ini membantu!

Bagi saya, saya memiliki natualSort () dan angularFileSort () di pipa yang mengatur ulang file. Saya menghapusnya dan sekarang berfungsi dengan baik untuk saya

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

Saya hanya menggunakan gulp-angular-filesort

function concatOrder() {

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

Saya berada di lingkungan modul di mana semua orang bergantung pada inti menggunakan tegukan. Jadi, coremodul perlu ditambahkan sebelum yang lain.

Apa yang saya lakukan:

1. Pindahkan semua skrip ke srcfolder
2. Hanya direktori gulp-renameAndacore_core

3. tegukan menjaga pesanan Anda gulp.src, konser saya srcterlihat seperti ini:

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

Jelas akan mengambil _sebagai direktori pertama dari daftar (sort natural?).

Catatan (angularjs): Saya kemudian menggunakan gulp-angular-extender untuk secara dinamis menambahkan modul ke coremodul. Dikompilasi terlihat seperti ini:

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

Di mana Admin dan Produk adalah dua modul.

jika Anda ingin memesan dependensi perpustakaan pihak ketiga, coba wiredep . Paket ini pada dasarnya memeriksa setiap ketergantungan paket di bower.json kemudian mengirimkannya untuk Anda.

Saya mencoba beberapa solusi dari halaman ini, tetapi tidak ada yang berhasil. Saya memiliki serangkaian file bernomor yang saya hanya ingin dipesan dengan namafabet alfabet sehingga ketika disalurkan keconcat() mereka akan berada dalam urutan yang sama. Artinya, pertahankan urutan input globbing. Mudah kan?

Inilah kode bukti konsep khusus saya ( printhanya untuk melihat urutan yang dicetak ke 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());
});

Alasan kegilaannya gulp.src? Saya menentukan bahwa gulp.srcmenjalankan async ketika saya bisa menggunakan sleep()fungsi (menggunakan a.map dengan sleeptime yang ditambahkan oleh indeks) untuk memesan output stream dengan benar.

Hasil dari async dari srcdirs rata - rata dengan lebih banyak file di dalamnya datang setelah dirs dengan lebih sedikit file, karena mereka butuh waktu lebih lama untuk diproses.

Dalam pengaturan tegukan saya, saya menentukan file vendor terlebih dahulu dan kemudian menentukan (lebih umum) semuanya, kedua. Dan itu berhasil menempatkan vendor js di atas hal-hal khusus lainnya.

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

Tampaknya Anda dapat meneruskan opsi "nosort" ke gulp.src gulp.src .