与Gulp一起订购Concat脚本

Question

比方说,例如,您正在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是一个很好的解决方案,起初可能很痛苦,但它很棒.

Answer 1

在构建我的AngularJS应用程序时,我最近遇到了与Grunt类似的问题.这是我发布的一个问题.

我最终做的是在grunt配置中按顺序显式列出文件.所以它看起来像:

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

事情很有效.而且Grunt显然很聪明,不能两次包含同一个文件.

这与Gulp的工作原理相同.

Answer 2

帮助,如果你需要一些文件来另一件事后文件的斑点,是从你的水珠排除特定的文件,就像这样:

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

您可以将其与指定需要首先出现的文件结合起来,如Chad Johnson的回答中所述.

Answer 3

我已经使用了gulp-order插件,但它并不总是成功,因为你可以看到我的堆栈溢出post 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);
});

Answer 4

使用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

Answer 5

该类型的流也可用于确保文件的具体顺序用gulp.src.将backbone.jsalways始终作为要处理的最后一个文件的示例代码:

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

Answer 6

我只是在文件名的开头添加数字：

0_normalize.scss
1_tikitaka.scss
main.scss

它可以在 gulp 中正常工作，没有任何问题。

Answer 7

我将我的脚本组织在不同的文件夹中,用于从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,因为它们被广泛使用,浏览器可能已经从其他站点缓存它们.