个人中心
文章发布
退出
作者热门文章
- 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
具体详细介绍请看下文： 在使用文件进行交互数据的应用来说，使用FTP服务器是一个很好的选择。本文使用Apache Jakarta Commons Net（commons-net-3.3.jar）
我在日志文件中收到这些警告: WARN 2013-01-15 00:08:15,550 org.eclipse.jetty.http.HttpParser- HttpParser Full for
我在使用特定网页时遇到问题。当我按下链接时，我收到应用程序错误(不是 http 错误等，而是应用程序级别错误)。 但是我打开了开发人员工具和网络控制台，我看到没有请求发送到服务器。 所以我双击并选择查
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。 例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。 例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
我正在尝试创建完整 uiscrollview 的快照，所有内容大小，我已经搜索了很多，并且我在 SO 上找到了一些东西，如下所示: Getting a screenshot of a UIScroll
我想复制一个包含以下结构的Vector，对我来说重要的是在修改复制的 vector 时保持原始Vector完整: public class objet_poid_n { public int
给定一个示例字符串 s = '嗨，我的名字是 Humpty-Dumpty，来自“爱丽丝，爱丽丝镜中奇遇记”'，我想将其分成以下 block : # To Do: something like {l =
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
我正在尝试创建一个正则表达式来查找文本中的 Linux 文件路径，但是正则表达式对我来说非常陌生。我有下面的代码片段，它将识别下面文件结构的开头。 .*(/bin/|/home/).* 完成正则表达式
我正在寻找远程托管的 JPG 的尺寸、宽度和高度。我已经了解了如何通过下载完整图像来执行此操作。 但是，如果我可以通过仅下载足以获取此信息的方式来做到这一点，那将是理想的。 典型的图像大小为 200K
有没有办法让下面的代码: import traceback def log(message): print "%s: %s" %(traceback.extract_stack()[0:-1]
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
git show 显示了修订版中所做的所有更改。但是，它会打印出所有更改——而不仅仅是文件名。 git show --stat 只显示文件名，但它把它们截断了!有没有办法获得已更改文件名的完整列表？
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗？更新问题，以便将其作为on-topi
当我在模板中调用我的模型 get_absolute_url 方法时，我想要一个绝对/完整的 url。在我的入门模型中，我有以下内容: def get_absolute_url(self): r
我正在使用 jQuery 1.5.1 这是我的代码: $('.cellcontent').animate({ left: '-=190'}, { easing: alert('start
我正在使用下面的方法删除条形图并使用新数据更新条形图，但这样做时出现了一个小故障/完整的图表消失 1 秒，直到加载新数据。但是是否可以通过仅增加/减少柱形而不实际消失图表来实现相同的目的。 d3.se
基于 this question 中的讨论，任何人都可以提供代码或代码链接，显示 NumericLiteralX 模块的完整实现(例如 this one )？我对 NumericLiteralX 模块
我的目标是检索网站的 html，并将其转换为可读的String。我下面的代码可以工作，但我遇到了一个技术问题:当我尝试检索 http://time.gov/HTML5 的 html 时，我在 andr
我是一名优秀的程序员,十分优秀！