javascript - Gulp 浏览器对文件进行排序/排序

Question

我有一个使用 browserify 和 watchify 的 Gulp 任务。正如你所看到的，我有四个文件。 modules.js 使用 overlay-model.js 中的类。 但 browserify 不保留我传递的顺序。 browserify 没有按字母顺序排列文件，因此它首先使用 modules.js。

我会尝试寻找解决方案gulp sort似乎不起作用，我找不到 browserify-ish 解决方案。

有人知道这件事吗？

var gulp = require('gulp');
var gutil = require('gulp-util');
var c = gutil.colors;
var sort = require('gulp-sort');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');

function compile(watch) {
    var bundler = watchify(browserify([
        './assets/js/overlay-model.js',
        './assets/js/slider.js',
        './assets/js/words.js',
        './assets/js/modules.js'
    ], {
        debug: true
    })
    .transform(babel.configure({
        presets: ['es2015']
    })));

    function rebundle() {
        bundler.bundle()
            .on('error', function(err) { console.error(err); this.emit('end'); })
            .pipe(source('build.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('./public'));
    }

    if (watch) {
        gutil.log(`${c.cyan('scripts')}: watching`);

        bundler.on('update', function() {
            gutil.log(`${c.cyan('scripts')}: processing`);
            rebundle();
        });
    }

    rebundle();
}

function watch() {
    return compile(true);
};

gulp.task('build', function() { return compile(); });
gulp.task('watch', function() { return watch(); });

gulp.task('scripts', ['watch']);

Answer 1

我认为通常您只有一个入口点(在您的情况下是modules.js)，它将使用require(...)来加载其他模块按照您想要的顺序。

// modules.js
require('./overlay-model');
require('./slider');
require('./modules');

然后使用browserify，例如:

browserify('./assets/js/modules.js', ...);