例如,你正在Backbone上构建一个项目,你需要按照一定的顺序加载脚本,例如,在backbone.js
之前需要加载underscore.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将在backbone.js
之后连接underscore.js
,而脚本在source/index.html
中的顺序并不重要,它会查看目录中的文件。
那么有没有人对此有什么想法呢?
我最好的想法是用1
,2
,3
来重命名供应商脚本,给它们正确的顺序,但我不确定我是否喜欢这样做。
随着我学到更多,我发现Browserify是一个很好的解决方案,一开始可能会很痛苦,但它很棒。
发布于 2014-02-23 06:05:26
最近在构建我的AngularJS应用程序时,我用Grunt遇到了类似的问题。这是我发布的a question。
我最终所做的就是在grunt配置中显式地按顺序列出这些文件。然后,配置文件将如下所示:
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]
Grunt能够找出哪些文件是重复的,并且不包括它们。同样的技术也适用于Gulp。
发布于 2014-05-07 10:45:12
我已经使用了吞咽顺序插件,但它并不总是成功的,正如您在我的堆栈溢出后gulp-order node module with merged streams中看到的那样。当浏览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);
});
发布于 2015-02-01 13:37:48
使用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>
在您的构建目录中,您将拥有对包含vendor.js、test.js和main.js的main.min.js的引用
https://stackoverflow.com/questions/21961142
复制相似问题