使用 Gulp 按顺序连接脚本

Concat scripts in order with Gulp(使用 Gulp 按顺序连接脚本)
本文介绍了使用 Gulp 按顺序连接脚本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

例如,您正在 Backbone 或其他任何东西上构建一个项目,并且您需要按特定顺序加载脚本,例如underscore.js 需要在 backbone.js 之前加载.

如何让它连接脚本以使它们井井有条?

//JS concat,剥离调试和缩小gulp.task('脚本', function() {gulp.src(['./source/js/*.js', './source/js/**/*.js']).pipe(concat('script.js')).pipe(stripDebug()).pipe(丑化()).pipe(gulp.dest('./build/js/'));});

我的 source/index.html 中的脚本顺序正确,但由于文件是按字母顺序组织的,gulp 将在 之后连接 underscore.js>backbone.js,和我的source/index.html里面的脚本顺序无关,看目录下的文件.

那么有人对此有什么想法吗?

我最好的办法是用 123 重命名供应商脚本,以给它们正确的顺序,但我是不知道我喜不喜欢这个.

随着我了解的更多,我发现 Browserify 是一个很好的解决方案,一开始可能会很痛苦,但它很棒.

解决方案

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

我最终做的是在 grunt 配置中按顺序显式列出文件.配置文件将如下所示:

<代码>['/path/to/app.js','/path/to/mymodule/mymodule.js','/path/to/mymodule/mymodule/*.js']

Grunt 能够找出哪些文件是重复的并且不包含它们.同样的技术也适用于 Gulp.

Say, for example, you are building a project on Backbone or whatever and you need to load scripts in a certain order, e.g. underscore.js needs to be loaded before backbone.js.

How do I get it to concat the scripts so that they’re in order?

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

I have the right order of scripts in my source/index.html, but since files are organized by alphabetic order, gulp will concat underscore.js after backbone.js, and the order of the scripts in my source/index.html does not matter, it looks at the files in the directory.

So does anyone have an idea on this?

Best idea I have is to rename the vendor scripts with 1, 2, 3 to give them the proper order, but I am not sure if I like this.

As I learned more I found Browserify is a great solution, it can be a pain at first but it’s great.

解决方案

I had a similar problem recently with Grunt when building my AngularJS app. Here's a question I posted.

What I ended up doing is to explicitly list the files in order in the grunt config. The config file will then look like this:

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

Grunt is able to figure out which files are duplicates and not include them. The same technique will work with Gulp as well.

这篇关于使用 Gulp 按顺序连接脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时,可能是由于缺少 QUnit start() 调用)