如何正确地缩小/组合网页项目中的CSS/JS与url重写
How to properly minify/combine CSS/JS in web projects with url rewriting
我已经挣扎了好几个小时,试图设置适当的缩小功能来重写url。我使用过useref和usemin,它们在扫描html、聚合所有JS和CSS并输出到一个文件方面做得很好。但是,就我的一生而言,我无法使url重写正常工作。我的结构很简单:
'root
index.html
application.css // minified
application.js // minified
'vendor
'bootstrap
'fonts // font files here
bootstrap.css // pre-minified
bootstrap.css
是指使用相对url的字体文件-font/bootstrap_font.ttf
当bootstrap被缩小时,它作为应用程序css的一部分降落,现在它在我的根目录中,所以路径将从根目录指向/font/bootstrap_font.ttf
。原始目录层次结构保持不变,所以我基本上想把这个url重写为/vendor/bootstrap/font/bootstrap_font.ttf
哦,为什么cssmin任务不接受多个文件?
更新这是我当前的咕哝文件:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
useminPrepare: {
html: 'web/public/index.html',
options: {
dest: 'web/public-dist'
}
},
usemin: {
html: 'web/public-dist/index.html',
},
copy: {
all: {
files: [{
expand: true,
cwd: 'web/public/',
src: ['**'],
dest: 'web/public-dist/'
}]
},
resources: {
files: [{
expand: true,
cwd: 'web/public/',
src: ['**/*.*', '!**/*.js', '!**/*.css', '!**/*.txt'],
dest: 'web/public-dist/'
}]
}
},
uglify: {
options: {
mangle: true,
sourceMap: false,
compress: true,
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'n'
},
standard: {
files: [{
expand: true,
cwd: 'web/public-dist/',
src: ['**/*.js'],
dest: 'web/public-dist/'
}]
}
},
cssmin: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'n',
},
standard: {
files: [{
expand: true,
cwd: 'web/public-dist/',
src: ['**/*.css'],
dest: 'web/public-dist/'
}]
},
}
});
grunt.registerTask('package', [ 'copy:resources', 'useminPrepare', 'concat:generated','cssmin:generated', 'uglify:generated', 'usemin']);
};
在这种形式下,cssmin甚至不能单独用作目标,因为它的配置显然是错误的——它抱怨不能接受很多文件。我在这里做错了什么?
从我收集的零碎信息来看,很明显,改变usemin流并不允许它稍后连接所有css和cssmin是至关重要的,因为这样,它显然会丢失关于每个css文件的目录来源的重要信息。我尝试过更改流,但由于同样的cssmin错误,它不起作用——无法接受许多文件。
好吧,当我开始用grunt构建css和js时,我肯定也遇到了同样的问题。以下是我对"相对URL"问题的解决方案。请注意,这篇文章不是在回答你的实际问题,而是提供了另一种解决问题的方法。我有更多的嵌套文件夹结构,但它对我来说很好,希望它能帮助你。
要点是将所有css/js构建到另一个文件夹,并将资产文件复制到这个新文件夹。让我们给它起一个"构建"的名字:
'root
'build
application.css - minified
application.js - minified
'fonts
...
'img
...
...
index.html
' ...
使用grunt contrib复制插件将所有资产复制到/build/assets目录,而不会破坏它们的原始结构。因此,css保存的相对过程中,字体仍然存在/字体/文件夹。
使用这种方法将面临的问题是保存资产的文件夹结构。好吧,它是通过在gruntfile中取消构建配置来解决的。现在,您不能说"好吧,grunt,将所有/**/*.css文件构建到application.css",而是必须针对不同的文件结构选项描述不同的情况。如果您的项目具有明显且合乎逻辑的文件结构,则添加它们并不复杂。
我使用的规则是,每个css文件都必须有assets目录作为其同级文件。所以gruntfile只扩展了几行,构建的结构看起来像这个
'root
'build
'css
'assets
'fonts
'img
application.css - minified //all relative passes saved
'foo
'bar
'biz
'assets
'fonts
first.css
'row
'assets
'img
second.css
index.html
显然,您必须具有资产名称命名规则,以防止覆盖文件。
希望,这能帮助您
- JS CSS切换按钮没有'不要向上移动
- 我应该连接/缩小已经缩小的JS/CSS吗?如果是,如何
- JS/CSS:如何在向下滚动超过1200像素(高度)后更改z索引值
- JS/CSS旋转的DIVS在任何屏幕的中间相遇
- 在企业应用程序框架中包含js/css文件的最佳实践是什么
- Html+js+css的打包程序
- 如何使用jquery/js/css逐步突出显示一段文本
- 重叠的选项卡 JS CSS HTML.
- 如何从我的机器提供HTML + JS + CSS网络应用程序,以便其他人可以查看它
- MVC Razor,包括来自另一个项目的JS/CSS文件
- 最轻的js/css,用于向用户提供SPA正在加载/初始化的视觉反馈
- 我们怎么知道消除HTML/JS/CSS文件中的空白可以缩短页面加载时间呢
- 有条件的包含js/css文件的IE与流星
- node.js可以选择性地引入到用普通PHP/js/CSS/HTML构建的web应用程序中吗
- 无法使用我的代码(html/js/css)初始化网络摄像头
- 当使用HTTP/2时,缩小和连接JS/CSS文件,以及使用精灵进行图像处理仍然可以提供性能优势
- JS CSS线夹重置(TextOverflowClamp.JS)
- JS CSS时钟在IE中不工作
- 有没有一个Wordpress插件可以让我展示HTML/JS/CSS的例子
- 使用Meteor为每个模板动态加载JS/CSS