สคริปต์ Concat เรียงตามลำดับด้วย Gulp

กล่าวว่าสำหรับตัวอย่างเช่นคุณกำลังสร้างโครงการ Backbone หรืออะไรก็ตามและคุณจำเป็นต้องโหลดสคริปต์ในลำดับที่แน่นอนเช่นจะต้องมีการโหลดก่อนunderscore.jsbackbone.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 เป็นวิธีแก้ปัญหาที่ยอดเยี่ยมมันอาจเป็นความเจ็บปวดในตอนแรก แต่มันก็ยอดเยี่ยม

ฉันมีปัญหาคล้ายกันเมื่อเร็ว ๆ นี้กับ Grunt เมื่อสร้างแอป AngularJS ของฉัน นี่คือคำถามที่ฉันโพสต์

สิ่งที่ฉันทำคือการลงรายชื่อไฟล์ตามลำดับใน grunt config ไฟล์กำหนดค่าจะมีลักษณะดังนี้:

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

ฮึดฮัดสามารถที่จะคิดออกว่าไฟล์ใดที่ซ้ำกันและไม่รวมพวกเขา เทคนิคเดียวกันนี้จะทำงานร่วมกับอึกได้เช่นกัน

อีกสิ่งหนึ่งที่ช่วยถ้าคุณต้องการไฟล์บางไฟล์ที่จะมาหลังจากหยดไฟล์คือการแยกไฟล์บางไฟล์ออกจาก glob ของคุณเช่น:

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

คุณสามารถรวมสิ่งนี้เข้ากับการระบุไฟล์ที่ต้องมาก่อนตามที่อธิบายไว้ในคำตอบของ Chad Johnson

ฉันใช้ปลั๊กอินสั่งอึก แต่ก็ไม่ประสบความสำเร็จเท่าที่คุณสามารถเห็นได้โดยสแต็คล้นโพสต์โมดูลโหนดสั่งซื้ออึกมากเกินไปกับลำธารที่ผสาน เมื่อเรียกดู Gulp docs ฉันเจอโมดูลแบบ 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);
});

ด้วย 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 ซึ่งจะประกอบด้วยผู้ขาย.js, test.js และ main.js

สตรีมเรียงลำดับ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/'));
});

ฉันเพิ่งเพิ่มตัวเลขไปที่จุดเริ่มต้นของชื่อไฟล์:

0_normalize.scss
1_tikitaka.scss
main.scss

มันทำงานในอึกโดยไม่มีปัญหาใด ๆ

ฉันมีการจัดสคริปต์ของฉันในโฟลเดอร์ที่แตกต่างกันสำหรับแต่ละแพ็คเกจที่ฉันดึงมาจากร่มเงารวมถึงสคริปต์ของตัวเองสำหรับแอปของฉัน เนื่องจากคุณกำลังจะแสดงรายการคำสั่งของสคริปต์เหล่านี้อยู่ที่ไหนสักแห่งทำไมไม่เพียงแค่เขียนมันไว้ในไฟล์อึกของคุณ? สำหรับนักพัฒนาใหม่ในโครงการของคุณเป็นเรื่องดีที่จุดสิ้นสุดสคริปต์ทั้งหมดของคุณอยู่ในรายการที่นี่ คุณสามารถทำได้ด้วย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 สำหรับผู้ที่ใช้กันอย่างแพร่หลายและเบราว์เซอร์อาจถูกแคชไว้จากไซต์อื่นแล้ว

ลองชุดสตรีม มันใช้งานได้เหมือน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'))
});

merge2ดูเหมือนว่าเป็นเครื่องมือเดียวที่ได้รับการดูแลและคงไว้ซึ่งการรวมกันของกระแสข้อมูลที่สั่งในขณะนี้

อัพเดท 2020

API มีการเปลี่ยนแปลงอยู่ตลอดเวลาห้องสมุดบางแห่งไม่สามารถใช้งานได้หรือมีช่องโหว่หรือการอ้างอิงของพวกเขามีช่องโหว่ที่ไม่ได้รับการแก้ไขเป็นเวลาหลายปี สำหรับการปรับแต่งไฟล์ข้อความคุณควรใช้สคริปต์ NodeJS ที่กำหนดเองและไลบรารี่ที่ได้รับความนิยมเช่นglobbyและfs-extraพร้อมกับไลบรารี่อื่น ๆ ที่ไม่มี Gulp, Grunt และอื่น ๆ

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

วิธีอื่นคือใช้ปลั๊กอินอึกที่สร้างขึ้นสำหรับปัญหานี้โดยเฉพาะ 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

หวังว่านี่จะช่วยได้!

สำหรับฉันฉันมี 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}))

ฉันแค่ใช้ gulp-angular-filesort

function concatOrder() {

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

ฉันอยู่ในสภาพแวดล้อมของโมดูลที่ทั้งหมดเป็นผู้อ้างอิงหลักโดยใช้อึก ดังนั้นcoreโมดูลจะต้องผนวกเข้ากับคนอื่น ๆ ก่อน

ฉันทำอะไรลงไป:

1. ย้ายสคริปต์ทั้งหมดไปยังsrcโฟลเดอร์
2. เพียงไดเรกทอรีgulp-renameของคุณcore_core

3. อึกกำลังรักษาลำดับของคุณ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"])

ตำแหน่งที่ผู้ดูแลระบบและผลิตภัณฑ์เป็นสองโมดูล

ถ้าคุณต้องการที่จะสั่งซื้อห้องสมุดของบุคคลที่สามอ้างอิงลองwiredep แพคเกจนี้จะตรวจสอบการขึ้นต่อกันของแต่ละแพ็คเกจใน bower.json โดยทั่วไปจะทำการส่งให้คุณ

ฉันลองใช้วิธีแก้ไขปัญหาต่าง ๆ จากหน้านี้ แต่ไม่ได้ผล ฉันมีไฟล์หมายเลขที่ฉันต้องการเรียงลำดับโดยใช้ตัวอักษรแบบตัวอักษรดังนั้นเมื่อมีการเรียงไฟล์เหล่านั้น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ใช้งาน async เมื่อฉันสามารถใช้sleep()ฟังก์ชั่นได้ (โดยใช้ a.mapพร้อมกับเพิ่มจำนวน sleeptime ตามดัชนี) เพื่อจัดลำดับสตรีมเอาท์พุทอย่างถูกต้อง

ผลที่สุดของ async ของsrcค่าเฉลี่ย dirs มีไฟล์มากขึ้นมาหลังจากที่ dirs มีไฟล์น้อยลงเพราะใช้เวลาในการประมวลผลนานกว่า

ในการตั้งค่าอึกของฉันฉันกำลังระบุไฟล์ผู้ขายก่อนแล้วจึงระบุทุกอย่าง (ทั่วไปมากขึ้น) วินาที และทำให้ผู้ขาย js ประสบความสำเร็จก่อนหน้าสิ่งที่กำหนดเองอื่น ๆ

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

เห็นได้ชัดว่าคุณสามารถส่งผ่านใน "nosort" เลือกที่จะ gulp.src gulp.src