问题标签 [gulp-concat]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angularjs - Gulp 运行的同步任务无法正常运行(在设置 AngularJs 环境时)
我正在学习 Gulp。我想使用 Gulpand 设置 AngularJS 环境,然后缩小并连接它们。但问题是当我尝试缩小或连接 js 文件时,我认为 gulp 没有找到由“gulp-ng-config”创建的用于设置 AngularJS 环境的 configFile.js
这是我的 gulpfile.js
这是由“setLocalEnv”任务创建的 configFile.js
这是生成的缩小文件
这是“gulp”默认命令的输出
javascript - Gulp concat 和需要路径
我对 gulp-concat 有疑问。我正在尝试将我的所有 js 文件连接到一个文件中,比如说 dist/app.js。
但是有一点我不明白。在该文件中,我所需的文件路径仍然与以前相同...
这是我的 gulpfile.js :
如您所见,我想连接嵌套文件夹。
以我的 /client/components/app.js 顶部为例:
所以在我由 gulp 生成的应用 app.js 中,我可以看到:
这是一个相对路径,它不能工作。
那么,用相对路径处理这些所需文件的技巧是什么?
非常感谢。
编辑:查看我得到的错误:
gulp - 如何在 gulp 中连接页眉、页脚和内容文件列表?
我正在制作一个带有头文件、页脚文件和内容文件列表的 html 生成器。我有文件夹结构部分/内容。在 partials 文件夹中是页眉和页脚,在 partials/contents 中是 index.html、about-us.html 等文件。在这些内容文件中,我想添加页眉和页脚。所以基本上,我想通过在内容文件夹中循环作为我的内容来连接文件,并添加页眉/页脚文件,然后在不同的文件夹中输出。我该如何做到这一点?或者您可以建议一个文件夹结构来轻松实现这一点。
在这里,我所拥有的只是内容文件夹中单个文件的 gulp 任务:
那么,我怎样才能在内容文件夹中自动循环呢?谢谢。
css - gulp concat JS 库 CSS
我正在使用 gulp concat 将所有 JavaScript 库 CSS 文件合并为一个。我的 gulp 任务看起来像这样:
将所有 CSS 合二为一确实有效。但是,问题是随着路径的更改,任何 CSS 链接文件url("../fonts/glyphicons-halflings-regular.woff")
都将无法加载。
我该如何克服这个问题?无论如何它可以根据新的输出 CSS 文件位置自动更改路径吗?
javascript - Gulp 连接 javascript 文件和库仅在 es6 代码上执行 babel
用 gulp 连接 javascript 文件的最佳做法是什么?我想将我所有的 javascript 文件连接到一个 app.js 文件中。在此之前,有几个用 es6 编写的文件需要用 babel 转译。我如何告诉流 babel 应该忽略框架?我使用 main-bower-files 来自动选择所有相关的框架文件,这带来了另一个问题。如何通过 main-bower-files 选定的框架订购所有内容,以便 jquery 始终位于连接文件的开头。
同时,我首先将所有 bower 文件和 es6 文件复制到一个目录中,然后将所有内容连接在一起:
有没有更清洁的方法来做到这一点?
css - 如何为 gulp-concat-css 的输入文件设置适当的基础?
我正在使用 gulp-concat-css 将选定的 CSS 列表合并为一个。我的项目文件夹结构如下所示:
现在,我的 gulp 任务看起来像这样:
问题是最终输出带有错误的 url rebase。这会导致 CSS URL 指向错误的文件路径。例如,来自的原始 URLbootstrap.min.css
是url('../fonts/glyphicons-halflings-regular.woff')
. 现在,组合的 CSS 带有 的 URL url(../../fonts/glyphicons-halflings-regular.woff)
,这是错误的。它应该是url(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)
根据 gulp-concat-css 文档,它说“对于正确的导入内联和 url rebase,请确保为输入文件设置正确的基础”。
如何为输入文件设置正确的基础以获得正确的 url rebase?
node.js - 如何使用 Gulp 提供连接的 Javascript 文件?
我正在尝试连接一些 JS 文件并使用 Gulp 将它们作为单个文件提供。我想在不写入文件系统的情况下执行此操作。
这是我到目前为止所尝试的:
但这不起作用。当我尝试访问http://localhost:8080/assets.js
时,它说找不到。
我该如何实现这一目标?我也可以使用另一个插件而不是gulp-connect
如果它有效。
javascript - Gulp.js:基于 forEach 循环的任务
我有一个如下所示的对象数组。
我希望 gulp 任务处理/连接数组中的每个条目,但它似乎不起作用。
gulp - Gulp 捆绑包然后缩小
我正在为我的应用程序创建 3 个缩小的捆绑包。我有 2 个任务来执行此操作,缩小和捆绑。Minify 依赖于 bundle。如果我运行 minify,这两个任务都运行没有错误。捆绑包已创建,但缩小的文件未创建。如果我删除了对 bundle 的依赖,我可以自己运行 minify 并成功创建缩小文件。这使我相信当缩小任务触发时文件可能正在使用中(因为捆绑尚未完成?)。如何让它等到文件完全准备好?我可以通过流吗?或者也许将这些组合成一个任务?它们目前不是单个任务的原因是因为它们每个包输出 2 个文件(一个未缩小的包和一个缩小的包)。
angularjs - Angular module().factory() 不是 concat (gulp) 之后的函数
在过去的几个小时里,我试图 concat/uglify 我的angular
应用程序gulp
,我已经将整个过程简化为简单的 concat,甚至将 angular 文件从 concat 进程删除到<script>
标头中的单独请求 - 但我仍然收到相同的错误:
未捕获的类型错误:angular.module(...).factory(...) 不是函数
没有 concat 一切都很好。
我的吞咽任务:
似乎错误一出现.factory
在代码中就会发生。
这是它当前因错误而停止的行 - 它是一个缩小的代码,但我并没有缩小它,我现在只是连接文件,包括angular-animate.min
这行代码(实际上是第一个)。
而且,如果我将其删除angular-animate
,它将只会在即将进行的另一家工厂上引发错误。
更新:哦,我错了,它不会在 .factory 遇到后立即中断;它一旦在连接文件的缩小部分遇到 .factory 就会中断...
很高兴听到任何解决方案/假设!