Concatenate/relocate CSS 个文件 Gulp
Concatenate/relocate CSS files with Gulp
我正在寻找与 Gulp 一起使用的插件链,它提供:
- 源地图支持
- 少
- 缩小
- 串联
- URL 替换(变基)到地址 relocation/concat
我目前有前四个,但我找不到可以给我最后一个(URL 变基)的现有插件组合。我没有找到任何发出源映射的 URL 变基插件。
需要说明的是,我的问题是,当我从我的项目开发文件夹中编译多个小 CSS 文件,并将它们输出到一个公共文件夹中时,连接导致的移动中断了相对 URLs,例如背景图片。
编辑:
听起来我现在使用的工具链已经是为了解决这个问题了。所以,表面上这就是答案。然而,这引发了另一个问题,即所需的语法应该如何工作。
这个问题理论上有很多重复:
- clean-css #152: Rebasing functionality very frustrating
- clean-css #195:
root
option on Windows
- clean-css #263: How to get relativeTo option working with CSS files in different paths
- http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
- Grunt cssmin rebasing a relative URI?
不幸的是,没有真正解释语法的答案,它们只是演示巫术;所以我不知道为什么以下内容不起作用。如果我能解决它,我会回到这里并将此标记为已接受,以表明此工具链确实可以满足我的需要。
源文件:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
gulp任务:
gulp.task(filename, function () {
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss({ relativeTo: './compiled' }))
.pipe(concat(filename))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./compiled'));
});
输出,有损坏的 URLs。注意多个缺陷。尽管 CSS 相对于所需资产提升了一个目录级别,但已添加了一个额外的父目录(!)。此外,URL 之一的硬资产文件夹名称已更改(!)。很奇怪:
/compiled
styleOutput1.css "url(../../compiled/logo.png)"
styleOutput2.css "url(../../site/background.png)"
我很抱歉继续巫术,但这是我的工作gulp管道:
.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))
以及正确的输出:
/compiled
styleOutput1.css "url(../assets/site/logo.png)"
styleOutput2.css "url(../assets/site/background.png)"
我个人使用gulp-minify-css并指定relativeTo
属性
gulp.task('css', function() {
gulp.src('./assets/css/main.css')
// Here I specify the relative path to my files
.pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/dist/'))
.pipe(notify({
"title": "Should I Go?",
"subtitle": "Gulp Process",
"message": '<%= file.relative %> was successfully minified!',
"sound": "Pop",
"onLast": true
}));
});
如果这对您不起作用,他们还有很多其他参数需要重新设置 URLs :https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically
值得注意的是:
rebase
- 设置为 false 以跳过 URL 变基
relativeTo
- 解析相对@import 规则和URLs 的路径
restructuring
- 设置为 false 以禁用高级重组
优化
root
- 解析绝对@import 规则和 rebase 相对路径
URLs
我正在寻找与 Gulp 一起使用的插件链,它提供:
- 源地图支持
- 少
- 缩小
- 串联
- URL 替换(变基)到地址 relocation/concat
我目前有前四个,但我找不到可以给我最后一个(URL 变基)的现有插件组合。我没有找到任何发出源映射的 URL 变基插件。
需要说明的是,我的问题是,当我从我的项目开发文件夹中编译多个小 CSS 文件,并将它们输出到一个公共文件夹中时,连接导致的移动中断了相对 URLs,例如背景图片。
编辑:
听起来我现在使用的工具链已经是为了解决这个问题了。所以,表面上这就是答案。然而,这引发了另一个问题,即所需的语法应该如何工作。
这个问题理论上有很多重复:
- clean-css #152: Rebasing functionality very frustrating
- clean-css #195:
root
option on Windows - clean-css #263: How to get relativeTo option working with CSS files in different paths
- http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
- Grunt cssmin rebasing a relative URI?
不幸的是,没有真正解释语法的答案,它们只是演示巫术;所以我不知道为什么以下内容不起作用。如果我能解决它,我会回到这里并将此标记为已接受,以表明此工具链确实可以满足我的需要。
源文件:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
gulp任务:
gulp.task(filename, function () {
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss({ relativeTo: './compiled' }))
.pipe(concat(filename))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./compiled'));
});
输出,有损坏的 URLs。注意多个缺陷。尽管 CSS 相对于所需资产提升了一个目录级别,但已添加了一个额外的父目录(!)。此外,URL 之一的硬资产文件夹名称已更改(!)。很奇怪:
/compiled
styleOutput1.css "url(../../compiled/logo.png)"
styleOutput2.css "url(../../site/background.png)"
我很抱歉继续巫术,但这是我的工作gulp管道:
.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))
以及正确的输出:
/compiled
styleOutput1.css "url(../assets/site/logo.png)"
styleOutput2.css "url(../assets/site/background.png)"
我个人使用gulp-minify-css并指定relativeTo
属性
gulp.task('css', function() {
gulp.src('./assets/css/main.css')
// Here I specify the relative path to my files
.pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/dist/'))
.pipe(notify({
"title": "Should I Go?",
"subtitle": "Gulp Process",
"message": '<%= file.relative %> was successfully minified!',
"sound": "Pop",
"onLast": true
}));
});
如果这对您不起作用,他们还有很多其他参数需要重新设置 URLs :https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically
值得注意的是:
rebase
- 设置为 false 以跳过 URL 变基relativeTo
- 解析相对@import 规则和URLs 的路径
restructuring
- 设置为 false 以禁用高级重组 优化root
- 解析绝对@import 规则和 rebase 相对路径 URLs