问题标签 [grunt-usemin]
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.
javascript - grunt usemin 和 concat:首先获取一个已经在 dist 中的文件而不是 app
使用 grunt 构建时,我有两个任务:
preprocess:dist
复制app/scripts/config.js
到dist/scripts/config.js
并替换// @echo FOO
到的第一个任务BAR
。
然后,usemin 将所有内容app/scripts/**/*.js
连接到dist/scripts/application.js
.
在 Gruntfile 中构建任务:
我的包含脚本index.html
:
一切正常,除了在连接文件 dist/scripts/application.js 中,我有config.js
from app/scripts
,而不是 from dist/scripts
。
我认为({.tmp,dist,app})
afterbuild:js
用于指定在连接时将文件放在哪里,但 config.js 仍然是从错误的目录(应用程序而不是 dist)中获取的。
所以我最终得到了 config.js,其中 // @echo VAR 没有被替换。
连接时如何告诉 concat/usemin 从 dist 而不是 app 获取 config.js?
注意:一种解决方案是进行预处理以放入config.processed.js
,app/scripts
然后包含此文件而不是config.js
,这样我就不必更改 usemin 的工作方式。
但是然后我必须将 config.processed.js 放在 .gitignore 中,并且我的源文件中有一个生成的文件......
我更喜欢在 .tmp 或 dist 中生成这个文件。
编辑:我的整个 Gruntfile:
angularjs - 使用 Grunt 连接缩小文件并跳过缩小
目前我正在编写一个 Grunt Build 文件;它使用“usemin”我在 HTML 中创建了 3 个块,这将创建 3 个文件 assets.min.js 、 lib.min.js 等。
这工作正常。但是我面临两个主要问题......
- Angular 显示错误“未捕获的错误 [$injector:modulerr]..
- 似乎 Usemin 也在再次缩小文件。
我也尝试了第二个选项,只是连接这些文件,即绕过缩小步骤避免 Usemin .. 仍然是同样的错误
请指导
gruntjs - Usemin with hbs files
Is there a way you can use grunts grunt-usemin
with .hbs
files. I only know how to use it for html files. But it would be ideal if it works for hbs files.
If any on you know of a solution, please let me know. I will be more than greatful!
Thanks in advance.
gruntjs - Yeoman / GruntJS / UseMin
我正在尝试使用 usemin 构建我的文件。我的设置是这样的: index.html - /en/bunchofhtmlfiles.html - /de/bunchofhtmlfiles.html - /scripts/apps.js
索引.html
-- /en/ -> html 文件
-- /scripts/ -> js文件
我如何编写 build:js 块?
在 index.html 中很清楚:
但是我在子目录中写了什么?
将脚本放在根目录“之前”的目录中。
这会使文件的 js 文件路径错误,但 js 文件会正确放置。
这是 usemin 的 gruntfile.js 部分:
gruntjs - Grunt cssmin 重新设置相对 URI?
我目前正在为我们的项目设置grunt-usemin,但我正在运行该cssmin
任务的一个小问题。
我们的项目依赖于一些外部库,其中一些会带来很长的一些额外资源(如图像或字体)。问题是这些库没有相同的文件夹结构。
这是不同文件夹结构的示例
在 index.html 中,所有样式表都被引用并放在构建块中。因此,当 usemin 任务执行时,库的样式表被连接到一个缩小的文件中,并放在输出文件夹中。相应的资产(图像)也将复制到此输出文件夹并在img
文件夹中展平。输出文件夹结构看起来像
您可以猜到,串联的样式表(在本例中)有两个不同的相对 URI:
image1.png
..\images\image2.png
这会导致无法找到某些图像的问题。我需要一个解决方案来将所有相对 URI 重新定位到 out 文件夹。我尝试使用任务的target
androot
选项,cssmin
但无济于事。有人可以为我指出此任务的正确配置或另一个可以实现我正在寻找的 Grunt 任务吗?
提前致谢!
gruntjs - 未定义 useminPrepare 选项属性
从命令行运行时出现 jshint 错误grunt
。
在我的 gruntfile 中,我有:
yeoman.dist 在 grunt.initConfig 中定义:
为什么我收到无法读取未定义的属性“选项”错误?
angularjs - Grunt usemin 无法将 rev'd 图像路径插入到翡翠部分
我正在使用股票 yeoman angular-fullstack 生成器 - 执行时会出现此问题grunt serve:dist
。图像已成功修改,但更新的图像路径不会添加到任何玉视图。
usemin 块:
我已将 html 目标更改为递归通配符,因为我的大部分翡翠文件都位于“partials”目录中。但是,一个新的 angular-fullstack 项目在 partials 目录中也有玉文件,并且图像替换按预期工作。
文件夹结构 - 源文件:
文件夹结构 - dist 文件:
Revving 适用于 CSS 和 JS 文件,但不适用于图像。
翡翠部分中的图像路径示例:
让我知道是否有任何其他信息有帮助。
javascript - grunt-usemin 海报属性 html 视频标签的自定义模式
我目前正在使用 yeoman 和 grunt-usemin 任务来加速我的资产。但是,由于我使用的是 video 标签,因此 usemin 会忽略该poster
属性。
例如
在 grunt-usemin 之后,我会期待以下内容:
我尝试使用此处patterns
记录的文档选项,例如:
但是,它不起作用。grunt-usemin 存储库中的示例使用 javascript,但我似乎无法让它们使用 HTML。以前的问题指出这是正确的方向,但似乎找不到一个可行的例子。想法?
build - 看不到 useminPrepare 结果
Yeoman build task 打破了我的应用程序开箱即用,我试图看看问题出在哪里。
所以我把其他任务注释掉了,只剩下了:
而 useminPrepre 任务的定义如下:
构建完成后,输出(见下文)似乎没问题,但dist
文件夹为空。如何让 useminPrepare 实际写入文件?
gruntjs - 在 concat 和 minify 之后,带有图像的供应商 css 不可用
我select2
在 Angular 项目中使用(使用 yeoman)。Select2 css 位于以下目录中:
bower_components/select2/select2.css bower_components/select2/select2.png
css 以下列方式使用 select2.png: background-image: url('select2x2.png')
运行 concat 和 minify 后,我有以下结构:
bower_components/select2/d204997b.select2x2 样式/034d1972.vendor.css
但问题是 venodr css 的 select2 部分正在样式目录中寻找 d204997b.select2x2 。
这是我的 GruntJS 文件的一部分:
谢谢