Kịch bản concat theo thứ tự với Gulp

Ví dụ, bạn đang xây dựng một dự án trên Backbone hoặc bất cứ điều gì và bạn cần tải các tập lệnh theo một thứ tự nhất định, ví dụ như underscore.jscần phải được tải trước đó backbone.js.

Làm thế nào để tôi có được nó để ghép các tập lệnh sao cho chúng theo thứ tự?

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

Tôi có thứ tự đúng các tập lệnh trong tôi source/index.html, nhưng vì các tệp được sắp xếp theo thứ tự chữ cái, gulp sẽ nối underscore.jssau backbone.jsvà thứ tự của các tập lệnh trong tôi source/index.htmlkhông quan trọng, nó nhìn vào các tệp trong thư mục.

Vì vậy, có ai có một ý tưởng về điều này?

Ý tưởng tốt nhất tôi có là để đổi tên các kịch bản cung cấp với 1, 2, 3để cung cấp cho họ theo đúng thứ tự, nhưng tôi không chắc chắn nếu tôi như thế này.

Khi tôi tìm hiểu thêm, tôi thấy Browserify là một giải pháp tuyệt vời, ban đầu nó có thể là một nỗi đau nhưng thật tuyệt vời.

Gần đây tôi đã gặp vấn đề tương tự với Grunt khi xây dựng ứng dụng AngularJS của mình. Đây là một câu hỏi tôi đã đăng.

Điều cuối cùng tôi làm là liệt kê rõ ràng các tệp theo thứ tự trong cấu hình grunt. Các tập tin cấu hình sau đó sẽ trông như thế này:

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

Grunt có thể tìm ra tập tin nào trùng lặp và không bao gồm chúng. Kỹ thuật tương tự cũng sẽ làm việc với Gulp.

Một điều hữu ích khác nếu bạn cần một số tệp đến sau một loạt tệp, là loại trừ các tệp cụ thể khỏi toàn cầu của bạn, như vậy:

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

Bạn có thể kết hợp điều này với việc chỉ định các tệp cần đến trước như được giải thích trong câu trả lời của Chad Johnson.

Tôi đã sử dụng plugin gulp-order nhưng nó không phải lúc nào cũng thành công như bạn có thể thấy bởi mô-đun nút nút xếp chồng bài đăng của tôi với các luồng được hợp nhất . Khi duyệt qua các tài liệu Gulp, tôi đã bắt gặp mô-đun streamque hoạt động khá tốt để chỉ định thứ tự trong trường hợp nối của tôi. https://github.com/gulpjs/gulp/blob/master/docs/recipes/USE-multipl-source-in-one-task.md

Ví dụ về cách tôi sử dụng nó dưới đây

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

Với gulp-useref, bạn có thể ghép mọi tập lệnh được khai báo trong tệp chỉ mục của mình, theo thứ tự bạn khai báo nó.

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

Và trong HTML, bạn phải khai báo tên của tệp xây dựng mà bạn muốn tạo, như thế này:

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

Trong thư mục bản dựng của bạn, bạn sẽ có tham chiếu đến main.min.js sẽ chứa Vendor.js, test.js và main.js

Các loại dòng cũng có thể được sử dụng để bảo đảm trật tự tệp cụ thể với gulp.src. Mã mẫu đặt backbone.jsluôn luôn là tệp cuối cùng để xử lý:

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

Tôi chỉ cần thêm số vào đầu tên tập tin:

0_normalize.scss
1_tikitaka.scss
main.scss

Nó hoạt động trong gulp mà không có bất kỳ vấn đề.

Tôi có các tập lệnh của mình được sắp xếp trong các thư mục khác nhau cho mỗi gói tôi lấy từ bower, cộng với tập lệnh riêng cho ứng dụng của tôi. Vì bạn sẽ liệt kê thứ tự của các tập lệnh này ở đâu đó, tại sao không liệt kê chúng trong tập tin gulp của bạn? Đối với các nhà phát triển mới trong dự án của bạn, thật tuyệt khi tất cả các điểm cuối tập lệnh của bạn được liệt kê ở đây. Bạn có thể làm điều này với 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']);

Lưu ý: jQuery và Bootstrap được thêm vào cho mục đích trình diễn. Có lẽ tốt hơn để sử dụng CDN cho những người này vì chúng được sử dụng rộng rãi và các trình duyệt có thể lưu chúng từ các trang web khác.

Hãy thử stream-series . Nó hoạt động như merge-stream / event-stream.merge () ngoại trừ việc thay vì xen kẽ, nó sẽ nối vào cuối. Nó không yêu cầu bạn chỉ định chế độ đối tượng như streamqueue , vì vậy mã của bạn sẽ sạch hơn.

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 trông giống như công cụ hợp nhất luồng được duy trì hoạt động và duy trì tại thời điểm này.

Cập nhật 2020

Các API luôn thay đổi, một số thư viện trở nên không sử dụng được hoặc chứa các lỗ hổng hoặc các phụ thuộc của chúng chứa các lỗ hổng, không được sửa trong nhiều năm. Đối với các thao tác tệp văn bản, bạn nên sử dụng các tập lệnh NodeJS tùy chỉnh và các thư viện phổ biến như globbyvà fs-extracùng với các thư viện khác mà không có các trình bao bọc Gulp, Grunt, v.v.

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

Một phương pháp khác là sử dụng plugin Gulp được tạo riêng cho vấn đề này. https://www.npmjs.com/package/gulp-ng-module-sort

Nó cho phép bạn sắp xếp các tập lệnh của mình bằng cách thêm vào .pipe(ngModuleSort())như sau:

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

Giả sử một quy ước thư mục của:

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

Hi vọng điêu nay co ich!

Đối với tôi, tôi đã có natualSort () và angularFileSort () trong đường ống sắp xếp lại các tập tin. Tôi đã gỡ bỏ nó và bây giờ nó hoạt động tốt với tôi

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

Tôi chỉ sử dụng gulp-angular-filesort

function concatOrder() {

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

Tôi đang ở trong một môi trường mô-đun nơi tất cả đều là những người phụ thuộc cốt lõi bằng cách sử dụng gulp. Vì vậy, coremô-đun cần phải được thêm vào trước những người khác.

Tôi đã làm gì:

1. Di chuyển tất cả các tập lệnh vào một srcthư mục
2. Chỉ cần thư mục gulp-renamecủa bạn coređể_core

3. gulp đang giữ trật tự của bạn gulp.src, concat của tôisrc trông như thế này:

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

Nó rõ ràng sẽ lấy _thư mục đầu tiên từ danh sách (sắp xếp tự nhiên?).

Lưu ý (angularjs): Sau đó tôi sử dụng gulp-angular-extender để tự động thêm các mô-đun vào coremô-đun. Tổng hợp nó trông như thế này:

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

Trong đó Admin và Sản phẩm là hai mô-đun.

nếu bạn muốn đặt hàng phụ thuộc thư viện của bên thứ ba, hãy thử Wiredep . Gói này về cơ bản kiểm tra từng phụ thuộc gói trong bower.json, sau đó kết nối chúng với bạn.

Tôi đã thử một số giải pháp từ trang này, nhưng không có giải pháp nào hiệu quả. Tôi đã có một loạt các tệp được đánh số mà tôi chỉ đơn giản muốn được sắp xếp theo tên người dùng theo thứ tự chữ cái để khi được chuyển đến concat()chúng sẽ theo cùng một thứ tự. Đó là, bảo toàn thứ tự của đầu vào Globing. Dễ thôi phải không?

Đây là mã bằng chứng khái niệm cụ thể của tôi ( printchỉ để xem thứ tự được in cho 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());
});

Lý do cho sự điên rồ của gulp.src? Tôi xác định rằng gulp.srcđã chạy async khi tôi có thể sử dụng một sleep()chức năng (sử dụng một.map tăng tốc độ theo chỉ số) để sắp xếp đầu ra luồng chính xác.

Kết quả không đồng bộ của các thư mục srctrung bình có nhiều tệp trong đó xuất hiện sau các thư mục có ít tệp hơn, vì chúng mất nhiều thời gian hơn để xử lý.

Trong thiết lập gulp của tôi, tôi chỉ định các tệp của nhà cung cấp trước và sau đó chỉ định mọi thứ (tổng quát hơn), thứ hai. Và nó thành công đặt nhà cung cấp js trước các công cụ tùy chỉnh khác.

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

Rõ ràng bạn có thể chuyển trong tùy chọn "nosort" cho gulp.src gulp.src .