您如何使用 Gulp 或 Javascript 框架绕过 Javascript 文件顺序？答案

【问题标题】：How Do You Get Around Javascript File Order Using Gulp Or A Javascript Framework?您如何使用 Gulp 或 Javascript 框架绕过 Javascript 文件顺序？
【发布时间】：2015-05-20 23:40:42
【问题描述】：

我正在使用 gulp 通过 gulp-concat 和 gulp-uglify 构建单个 javascript 文件。

原始文件

//File 1
var Proj = Proj || {};

//File 2
Proj.Main = (function() { 
    var Method = function(){ /*Code*/ };
    return { "Method":Method };
})();

//File 3
Proj.Page = (function() { 
    var Method = Proj.Main.Method;
    return { "Method":Method };
})();

Gulp 返回一个错误的缩小文件，因为这些文件以错误的顺序连接。我知道我可以在 .src([]) 中指定顺序，但我不想在添加 javascript 文件时维护数组。

有没有一种方法可以创建对这些“命名空间”的引用，而不必担心连接文件的顺序？或者，gulp 有没有办法通过这些命名空间的知识自动处理连接？

编辑：

我知道我可以在.src([]) 中指定文件顺序。我想在不必担心文件顺序的情况下进行开发，无论是通过 gulp 包还是 javascript 框架。感谢您提供帮助的回复，但我需要一个明确的“不。您不能这样做。”或“是的。这是如何...”将主题标记为已回答。

【问题讨论】：

就我个人而言，我会以不同的方式编写 javascript，一旦加载了一个脚本，我就会发出一个事件，以便另一个脚本可以执行。如果两个脚本如此紧密地依赖，它们似乎应该被不同地管理。

标签： javascript gulp gulp-concat gulp-uglify

【解决方案1】：

嗯，一种选择是尝试gulp-order。

另外，请查看this answer to "gulp concat scripts in order?"。

基本上，它提到了您已经说过的内容，即必须按照您希望它们进入的顺序明确命名文件。我知道您不想这样做，但是 gulp 怎么知道您想要哪个顺序你的文件在哪里？

但是，值得指出的一点是，您有一组文件的顺序无关紧要，然后，比如说，有 2 个文件的顺序确实很重要，您可以这样做像这样：

gulp.src([
    'utils/*.js',
    'utils/some-service.js',
    'utils/something-that-depends-on-some-service'
])

gulp-concat 不会重复文件，因此所有不是some-service.js 或something-that-depends-on-some-service.js 的文件都会首先连接起来，然后最后两个文件会以正确的顺序连接起来。

【讨论】：

【解决方案2】：

由于没有提到，实现 webpack 或 browserify 绝对可以解决这个问题，而无需实现某种 hacky 感觉的解决方案。

下面是一个简单的使用示例：

var source = require('vinyl-source-stream'), //<--this is the key
    browserify = require('browserify');

    function buildEverything(){
        return browserify({
               //do your config here
                entries: './src/js/index.js',
            })
            .bundle()
            .pipe(source('index.js')) //this converts to stream
             //do all processing here.
             //like uglification and so on.
            .pipe(gulp.dest('bundle.js'));
        }
    }

    gulp.task('buildTask', buildEverything);

在您的文件中，您使用require 语句来指示哪些文件需要其他文件。

【讨论】：