标签: clean-css

我正在寻找一个与Gulp一起使用的插件链,它提供:

• 源地图支持
• 减
• 缩小
• 级联
• 用于解决重定位/连接的URL替换(rebase)

我目前有前四个,但我找不到现有插件的组合,它也会给我最后一个(URL rebasing).我没有找到任何发布源映射的URL rebasing插件.

为了清楚起见,我的问题是,当我从项目开发文件夹中编译多个小CSS文件并将它们输出到公共文件夹时,连接产生的移动会破坏相对URL,例如背景图像.

EDITS:

听起来我目前使用的工具链已经打算解决这个问题.所以,这表面上是答案.但是,这引发了另一个问题,即所需语法应该如何工作.

这个问题在理论上有很多重复:

• clean-css#152:重新定位功能非常令人沮丧
• clean-css#195:rootWindows上的选项
• clean-css#263:如何让relativeTo选项在不同的路径中使用CSS文件
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin重新定位相对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'));
});

输出,URL损坏.注意多个缺陷.虽然CSS是相对于所需资产引发的目录级别,但已添加了一个额外的父目录(!).此外,其中一个URL已更改硬资产文件夹名称(!).很奇怪:

/compiled
    styleOutput1.css "url(../../compiled/logo.png)"
    styleOutput2.css "url(../../site/background.png)"

我为继续伏都教道歉,但这是我的工作管道:

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))

而正确的输出:

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

我的应用程序属于Angular 5.2.6

事情是正常的 ng serve

但是在运行时:ng build --prod在失败之前需要一段时间

这些错误似乎与clean-css操作有关:

错误跟踪:

 92% chunk asset optimization/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
  if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
                      ^

TypeError: Cannot read property 'line' of undefined
    at originalPositionFor (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:23)
    at originalMetadata (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
    at intoTokens (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:240:75)
    at tokenize (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
    at fromStyles (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:147:12)
    at fromString (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/clean.js:99:12
    at _combinedTickCallback (internal/process/next_tick.js:95:7)
    at process._tickCallback (internal/process/next_tick.js:161:9)

它似乎在清洁CSS时失败了.

这是我的package.json:

{
  "name": "test",
  "version": …

所以我注意到我目前的Gulp设置没有导入谷歌字体等远程字体.在我的main.scss档案中,我有:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);

当它编译缩小时,它看起来像这样:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}

我正在使用gulp-minify-css哪个使用clean-css.我知道你可能需要做些什么来让远程导入正常工作,但阅读文档会给我留下更多问题然后回答.这是我的gulp文件的一部分,用于处理Sass/CSS缩小:

// Minimize CSS
gulp.task('minify-css', function() {
  return gulp.src('css/src/*.css')
    .pipe(minifyCss({
        compatibility: 'ie8',
        aggressiveMerging: false
        }))
    .pipe(gulp.dest('css/'));
});

任何帮助,将不胜感激!谢谢.

我们在我们的应用程序中使用este.js dev stack,它使用webpack捆绑JS和CSS资产.Webpack 配置为webpack.optimize.UglifyJsPlugin在为生产环境构建时使用stylus-loader,以及生产环境的精确加载程序配置.如下:

ExtractTextPlugin.extract(
  'style-loader', 
  'css-loader!stylus-loader'
);

然后我有3个样式文件:

// app/animations.styl
@keyframes arrowBounce
  0%
    transform translateY(-20px)
  50%
    transform translateY(-10px)
  100%
    transform translateY(-20px)

@keyframes fadeIn
  0%
    opacity 0
  50%
    opacity 0
  100%
    opacity 1

// components/component1.styl
@require '../app/animations'

.component1
  &.-animated
    animation arrowBounce 2.5s infinite

// components/component2.styl
@require '../app/animations'

.component2
  &.-visible
    animation fadeIn 2s

在生成构建之后,两个关键帧动画都被重命名为a(可能是一些CSS缩小css-clean),因为你可以推断fadeIn覆盖,arrowBounce因为缩小后名称和优先级相同.

文件components/component1.styl和components/component2.styl被包含在他们的阵营组件文件[name].react.jsusing语句:

import 'components/component1.styl'; 
import 'components/component2.styl';

我疯了.尝试了许多不同的解决方案但没有真正有用.

I use NPM and Gulp for my package manager and build system.\nI have installed "gulp-sass" to support sass, and "gulp-clean-css" so that I can @import css files inline.\nI capture my SCSS files in "_frontend/scss/**/*", and compiles that into a single file as "assets/frontend/css/styles.css".\nIn the output location, I have other important resources folders that are siblings of "css": "fonts", "img", and "js".

My problem is I cannot get the url() relative paths to target correctly when I\'m importing a "*.css" …

我在本地安装了clean-css但是我的npm脚本抛出错误,因为找不到cleancss(sh: cleancss: command not found).我尝试直接从命令行运行cleancss并全局安装(npm install -g clean-css)但我的shell仍然不知道它.所有其他包都工作正常.这是我的package.json的样子:

{
  "scripts": {
    "lint": "echo '=> linting' && jshint **/*.js",
    "minify:js": "echo '=> minify:js' && uglifyjs main.js -o public/js/main.min.js",
    "minify": "echo '=> minify:css' && cleancss main.css -o public/css/main.min.css"
  },
  "devDependencies": {
    "clean-css": "^4.0.2",
    "jshint": "^2.9.4",
    "uglify-js": "^2.7.5"
  }
}

我错过了什么？

如何删除gulp clean-css中的特殊注释？

.pipe(cleancss({specialComments: 0}))

似乎没有效果

我已经在 PhpStorm 中设置了文件观察器的默认设置。修改文件名并添加--source-map参数后，生成的 CSS 文件为空。

论据： --no-color --clean-css --source--map=$FileNameWithoutExtension$.min.css.map' '$FileName$ $FileNameWithoutExtension$.min.css

当我直接在 Mac 终端中运行该命令时，文件生成良好。

我有一个 bash 脚本，可以缩小我所有的 less 文件并将结果输出到 .min.css 文件中。我已经看过类似问题的其他答案，但没有任何效果。今天更新到 Mac OS Catalina 后，我的 bash 脚本停止工作并出现以下错误：

无法加载插件 clean-css 请确保它安装在 less 下或同一级别

这是我的 minify bash 脚本内容的一部分：

YOORS=$(pwd)
...
cd ${PROJECT}/less
...

printf "%-${WIDTH}s %10s\n" "Compiling lessfile content" $(~/node_modules/.bin/lessc --clean-css plugins/lessfile.less > ${PROJECT}/web/css/plugins/lessfile.min.css && echo "${GREEN}[OK]${NC}" || echo "${RED}[FAIL]${NC}")

这很奇怪，因为在命令行中触发命令完全正常，但是 bash 脚本突然停止工作。

我的电脑上安装了 Clean-css：

MacBook-Pro:yoors user$ cleancss -v
4.3.0

是的,我们都知道选择器之间的逗号是什么意思.

这是不同的.我以为我非常了解CSS,但今天我遇到了一些我以前从未见过的东西 - 声明块之间的逗号.我一直在使用clean-css,它生成了这个缩小的清理输出(为了便于阅读,我重新插入了一些空格):

body .container
{
    color:#EEE
}
,
.navbar-default .navbar-nav>.active>a:hover,
h1
{
    color:#000
}

注意在声明块中的结束花括号之后的逗号(我已放置在它自己的行上)body .container.这是有效的CSS吗？如果是这样,这是什么意思？

我对clean-css的输入CSS如下:

body .container {
  color: #EEEEEE;
}

h1{
  color: #000;
}

.navbar-default .navbar-nav > .active > a:hover, {
    color: black;
}