问题标签 [gulp-inject]

我的目录结构如下：

现在我的 gulpfile.js 如下所示：

我的 index.html 文件如下所示：

但不知何故，我的 js 文件没有通过 gulp 添加到 index.html 中。那么路径有什么问题吗？

gulpfile.js

索引.html

我在这里得到 app/js/app.js而不是js/app.js. 我应该如何修改我的路径以使其完美运行？

我是 js、node 和所有相关事物的新手。我正在尝试使用 gulp、bower、浏览器同步和其他插件从头开始设置前端开发环境。

我快完成了，它以某种方式工作，除了一些我无法解决的细节，因为我不确定它是代码语法中的东西还是我的 gulpfile.js 文件中执行的函数的顺序，或者因为插件没有正确使用。我已经尝试更改它们的顺序，更改某些路径等，但没有结果。

现在我遇到以下问题：

• main.scss 需要保存两次才能看到浏览器中反映的更改。

• 当我在控制台中运行 gulp 时，这是我收到的（这些错误是新的，并且出现在 Poeta 在他的回答中提出的一个小改动之后，这对我有很大帮助。

---

[16:38:08] 开始'html'...

[16:38:08] 'html' 在 41 毫秒后出错

[16:38:08] ReferenceError：injectFiles 未 在 Gulp 中定义。([完整路径]\gulpfile.js:50:18)

在 module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)

在 Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)

在 Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)

在 [full_path]\node_modules\orchestrator\index.js:279:18)

完成时 ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)

在 [full_path]\node_modules\orchestrator\lib\runTask.js:52:4

在 f ([full_path]\node_modules\once\once.js:17:25)

在 DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)

在 emitNone (events.js:91:20)

---

这是我的 gulpfile.js 内容：

那么，您能否为我指明正确的方向，以正确的方式设置这个环境？

---

关于先前问题的更新：由于布鲁诺·波埃塔的回答，以下问题得到了解决。

管道工发现未处理的错误：插件“gulp-sass”中的错误

消息：src\styles\main.scss Error: An @import loop has found: (full_path) /src/styles/main.scss在 src/styles/main.scss 的第 526 行导入 src/ styles/main.scss

在那条消息之后...

[15:11:18] 4.48 秒后完成“样式”

[15:11:18] 开始'html'...

[15:11:19] 将 1 个文件吞入 index.html。

[15:11:19] 1.44 秒后完成“html”

[15:11:19] 开始“默认”...

[15:11:19] 6.98 μs 后完成“默认”

[Browsersync] 访问 URL：

本地：本地主机：3000

外部：192.168 .0.4：3000

用户界面：本地主机：3001

用户界面外部：192.168 .0.4:3001

[Browsersync] 提供来自 dist 的文件

[Browsersync] 正在观看文件...

---

注意：第 526 行不存在，因为它是由 gulp-inject 插件生成的。这些是 main.css 文件中的最后几行，第 520 和 521 行：

// 注入：应用程序

// 结束注入

gulpfile.js

#xA;

If i put the above code it gives me the error shown below and it does not copy file.

#xA;

But when I put the below code, it injects css/js file in index.html inside app directory.

#xA;

How to acheieve index.html with css/js file injection in build folder?

我的应用程序结构如下：

我想从“src”文件夹中的 index.html 中的“css”文件夹插入文件。

我们将低级 html 标记处理为 npm 模块，可以通过注释指定其支持 html 将在该位置注入的模块的名称。一个模块包含 html，支持 SCSS 和 vanilla JS。从 SCSS 和 JS 的角度来看，一切都搞定了。安装模块的那一刻，SCSS 被编译、连接并附加到核心 CSS 文件，然后被压缩。JS 的处理方式非常相似。

我非常关注的地方是如何处理 html 片段。这是我所拥有的，它有效，但这绝不是动态的。

我希望能够做的（在目标 index.html 文件中）指定注入其 html 片段的模块名称。所以像：

唯一的要求是在尝试注入它们的代码片段之前已经安装了模块。所以 gulp 任务需要扫描索引文件，并且对于每个注入评论，去获取该模块的 html 片段并将其注入。

有什么提示可以帮助我朝着正确的方向前进吗？

谢谢！

我正在使用 angular 1.6 和 gulp 以及 live reload 和 babel 来运行开发服务器。使用 yarn 安装所有 Angular 包，因此使用 npmfiles 自动导入 index.html 中的依赖项。

所有包都添加到最终 index.html 中的适当位置，但该文件仅包含 node_modules/package/package.json 中提到的相应 index.js 的内容“main: attributes

例如。添加角度库。最终的 .tmp/index.html 有以下内容

但是这个angular/index.js有以下内容

但我想要角度 js 文件的内容

此外，它在控制台中为每个包提供了多个错误

未捕获的 ReferenceError: 要求未在 index.js:1 中定义

这是相关代码

并使用此任务添加所有 node_modules libray

在 src/index.html

现在，如果我取消注释转换属性，它会直接在 index.html 中添加文件的内容而不带<sctipt>标签

所以我的问题是如何添加文件的原始内容而不是 index.js 的 2 行

当我使用构建文件时出现以下错误gulp build。但gulp serve工作正常，没有任何错误。我收到类似的错误

(node:7144) UnhandledPromiseRejectionWarning: UnhandledPromiseRejectionWarning: Unhandled Promise Rejection (rejection id: 1): Error: File not found with single glob: .tmp\templateCacheHtml.js (node:7144) [DEP0018] DeprecationWarning: Unhandled Promise Rejection is deprecated。将来，未处理的 Promise 拒绝将使用非零退出代码终止 Node.js 进程。[12:36:51] 'build' 在 26 毫秒后出错 [12:36:51] 错误：找不到带有单数 glob 的文件：.tmp\index.html

以前我的项目文件夹包含现在我更改bower_components为. 因为我迁移到纱线。我的 index.html 文件如下所示，index.html 中有什么需要更改的吗？<dir>/bower_components/packagesnode_modules/@bower_components/packages

有人可以建议我解决这个问题吗？谢谢，

当我运行我的任务时，它说文件被注入到控制台中的 index.html ；但实际上 index.html 文件中没有注入 js 文件。

我的任务功能如下

我正在使用 gulp3.9.1 和 gulp-inject 版本 3.0.0，任何帮助都将不胜感激。

我正在关注这个hackernoon gulp自动化教程。

不幸的是，我卡在了介绍 gulp-inject 使用的第 6 步。

尽管逐字执行这些步骤，但我在 Windows Powershell 中收到以下错误（我正在 Windows 机器上开发）：

它还会生成一个 HTML 文档，其中包含一些未知的（至少对我而言）编码字符。以下是 index.html 中的代码：

我已经调查了此事，到目前为止，我遇到了其他几个问题，这些问题也产生了“Nothing to injection”消息，但它们似乎要么是流问题，要么忘记设置文件目标，要么不需要相关的 gulp 包。

我还将在下面提供相关代码，以确保：

gulpfile.js

package.json 中的相关片段

index.html（来自 src 目录）

任何线索将不胜感激，并感谢您花时间阅读此问题。