Home>

i want to erase blank lines in css block with gulp

I am compiling scss to css using gulp-sass, but as shown in the title, it is difficult to understand how to erase blank lines in the block with css.

I thought I could erase it if I used a formatter, but I couldn't find a formatter with the function I wanted.

p {
  background: pink;
  color: red;
// blank line I want to erase
  box-sizing: 5px;
  -webkit-border-radius: 5px;
}
// blank lines you don't want to erase
p span {
  background: skyblue;
  color: blue;
}

In the above example, there is a blank line in the style specification for the p tag, and I want to delete it.
However, even if you can delete the above line using the formatter,// blank line you don't want to deletebetweenpandp spanOnly the formatter that erased until was found.
(Or it may be possible depending on the setting ...)

In other words, please tell me the formatter (or a package with a similar function) that deletes blank lines in blocks while keeping blank lines between blocks, and how to set it.

* By the way, the blank line I want to erase is thegulp-autoprefixercomment/* autoprefixer: ignore next */gulp-replaceRemnants deleted using. As a result of deleting the compiled file so that it does not include comments, a blank line was created.

css node.js sass gulp
  • Answer # 1

    An easy way is to specify thefixoption ofgulp-stylelint.

    For example, in the following directory structure,

    sample
├ scss
│ ├ style.scss
│ └ _mixins.scss
├ package.json
Style .stylelintrc

    package.json,gulpfile.jsis as follows,

    {
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \" Error: no test specified \ "&&exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^ 9.7.3",
    "gulp": "^ 4.0.2",
    "gulp-postcss": "^ 8.0.0",
    "gulp-sass": "^ 4.0.2",
    "gulp-strip-css-comments": "^ 2.0.0",
    "gulp-stylelint": "^ 10.0.0",
    "stylelint": "^ 12.0.0"
  }
}
    exports.default = function () {
  const autoprefixer = require ('autoprefixer');
  const gulp = require ('gulp');
  const sass = require ('gulp-sass');
  const postcss = require ('gulp-postcss');
  const stripCssComments = require ('gulp-strip-css-comments');
  const gulpStylelint = require ('gulp-stylelint');
  return gulp.src ('./ scss/style.scss')
    .pipe (sass ({outputStyle: "expanded"}))
    .pipe (postcss ([autoprefixer ()]))
    .pipe (stripCssComments ())
    .pipe (gulpStylelint ({fix: true}))
    .pipe (gulp.dest ('./ dest'))
};

    .stylelintrcis

    {
  "rules": {
    "max-empty-lines": 1,
    "declaration-empty-line-before": "never",
    "block-closing-brace-empty-line-before": "never"
  }
}

    Each SCSS file looks like this:

    style.scss

    @ import "mixins";
.box {@include transform (rotate (30deg));}
/ * This CSS will print because% message-shared is extended.
% message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: # 333;
}
// This CSS won't print because% equal-heights is never extended.
% equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.message {
  @extend% message-shared;
}
.success {
  @extend% message-shared;
  border-color: green;
}
.error {
  @extend% message-shared;
  border-color: red;
}
.warning {
  @extend% message-shared;
  border-color: yellow;
}


    _mixins.scss

    @ mixin transform ($property) {
  / * autoprefixer: ignore next * /
  box-sizing: border-box;
  transform: $property;
}

    If you run thedefaulttask here, the output CSS file will be as follows, and you can confirm that the blank line with the comment has been deleted.

    . box {
  box-sizing: border-box;
  -webkit-transform: rotate (30deg);
          transform: rotate (30deg);
}
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: # 333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

Related articles