个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
感觉 99% 的教程都是关于使用 gulp.js 的，正确的工作流程只显示了 js/css 文件(例如)缩小和连接的部分。
但我还没有找到下一步该怎么做才能获得正确的 index.html 文件，其中正确引用了新处理的文件，而无需手动编辑文件。
示例 index.html:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
[...]
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-animate.min.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
</body>
结果应该是这样的:
<head>
<link rel="stylesheet" href="css/combined.css">
</head>
<body>
[...]
<script src="javascript/combined.js"></script>
</body>
在 combined.* 文件中，所有的 css/js 文件都是连接在一起的，但只有那些用 gulp 缩小的，不以 *.min.js 结尾的> 或 *.min.css。
Gulp-usemin和 gulp-useref不适合，因为它们将构建 block 内的所有文件连接在一起，然后您可以缩小(组合的)结果(什么会再次缩小已经缩小的文件 - 我不想要那样)。
这个缺失的最后一步看起来如何使工作流程完整？
最佳答案
由于它似乎不是我上述问题的任何令人满意的答案/解决方案，所以我最终使用了另一种方法，这种方法在生产方面按预期工作良好，并在开发过程中受益。
我一直在使用未缩小版本的 vendor 库(如 AngularJS、jQuery 等)，然后 HTML 看起来像这样(userref 有特殊注释):
<head>
<!-- build:css css/styles.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<!-- endbuild -->
</head>
<body>
[...]
<!-- build:js js/scripts.js -->
<script src="javascript/angular.js"></script>
<script src="javascript/angular-animate.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
<!-- endbuild -->
</body>
gulpfile.js:
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
cleanCSS = require('gulp-clean-css'),
rev = require('gulp-rev'),
revReplace = require('gulp-rev-replace');
gulp.task('default', ['combineminify']);
gulp.task('combineminify', function () {
return gulp.src('index.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify({
preserveComments: 'license'
})))
.pipe(gulpif('*.css', cleanCSS({
keepSpecialComments: '*'
})))
.pipe(gulpif('*.js', rev()))
.pipe(gulpif('*.css', rev()))
.pipe(revReplace())
.pipe(gulp.dest('/path/to/destination/folder/'));
});
这个 gulp 脚本然后在目标文件夹中创建一个新的 index.html 文件:
<head>
<link rel="stylesheet" href="css/styles-1627b7eb0c.css">
</head>
<body>
[...]
<script src="js/scripts-595ed88b32.js"></script>
</body>
预期的两个丑化和缩小的 *.css 和 *.js 文件(在文件名后附有计算字符串以避免某些浏览器中的缓存问题)是在文件夹 ./css 和 ./js 中创建。
关于javascript - 使用 gulp 缩小和连接( Angular )网络应用程序的完整工作流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25447001/
25
4
0
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
首先是一些背景；我们正在开发一个数据仓库，并对我们的 ETL 过程使用哪些工具进行一些研究。该团队非常以开发人员为中心，每个人都熟悉 C#。到目前为止，我已经看过 RhinoETL、Pentaho (
我需要具有管理员权限的进程。从this问题和答案来看，似乎没有比启动单独进程更好的方法了。因为我宁愿有一个专用于该过程的过程，而不是仅为此方法在第二个过程中启动我的原始应用程序–我以为我会在VS201
我有这个函数来压平对象 export function flattenObject(object: Object, prefix: string = "") { return Object.key
我正在开发一个基于java的Web应用程序，它要求我使用来自SIP( session 启动协议(protocol))消息的输入生成序列图。我必须表示不同电话和相应服务器之间的调用流程。我可以利用任何工
这是我的代码: Process p=Runtime.getRuntime().exec("something command"); String s; JFrame frame = new JFram
我对 istio 的 mTLS 流程有点困惑。在bookinginfo 示例中，我看到服务通过http 而不是https 进行调用。如果服务之间有 mTLS 那么服务会进行 http 调用吗？ 是否可
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
之前做过一个简单的纸牌游戏，对程序的整体流程有自己的想法。我最关心的是卡片触发器。 假设我们有一张名为“Guy”的牌，其效果为“每当你打出另一张牌时，获得 2 点生命”。我将如何将其合并到我的代码中？
我有 4 个 Activity 。 A、B、C 和 D。 用户可以从每个 Activity 开始任何 Activity 。 即 Activity A 有 3 个按钮来启动 B、C 和 D。以同样的方式
我做了一个简单的路由器类，简化后看起来像这样 // @flow import { Container } from 'unstated' type State = { history: Objec
我有两个 Activity ，比如 A1 和 A2。顺序为 A1->A2我从 A1 开始 A2 而没有在 A1 中调用 finish() 。在 A2 中按下后退按钮后，我想在 A1 中触发一个功能。但
我正在考虑在我的下一个项目中使用 BPEL。我试用了 Netbeans BPEL 设计器，我对它很满意。但在我决定使用 BPEL 之前，我想知道它对测试驱动开发的适用程度。不幸的是，我对那个话题知之甚
我需要将两个表格堆叠在一起，前后都有内容。我无法让后面的内容正常流动。堆叠的 table 高度可变。 HTML 结构: ... other content ...
我是 Hibernate 的新手。我无法理解 Hibernate 的流程。请澄清我的疑问。 我有“HibernateUtil.java ”和以下语句 sessionFactory = new Anno
早上好 我开始使用 Ruby，想创建一个小工具来获取我的公共(public) IP 并通过电子邮件发送。我遇到了字符串比较和无法处理的 if/else block 的基本问题。 代码非常简单(见下文)
我目前正尝试在我的团队中建立一个开发流程并阅读有关 GitFlow 的信息。它看起来很有趣，但我可以发现一些问题。 让我们假设以下场景: 我们完成了 F1、F2 和 F3 功能，并将它们 merge
我已经使用 git flow 有一段时间了。我很想了解一个特定的用例。 对于我的一个项目，我有一张新网站功能的门票。此工单取决于许多子任务。我想为主工单创建一个功能分支，然后为每个子任务创建一个脱离父
简介 "终结"一般被分为确定性终结(显示清除)与非确定性终结(隐式清除) 确定性终结主要 提供给开发人员一个显式清理的方法，比如try-finally,using。
你怎么知道在一个程序中已经发现并解决了尽可能多的错误？ 几年前我读过一篇关于调试的文档(我认为这是某种 HOWTO)。其中，该文档描述了一种技术，其中编程团队故意将错误添加到代码中并将其传递给 QA
我是一名优秀的程序员,十分优秀！