clean-css不会执行所有选项,特别是在最后一个CSS规则上添加分号

时间:2019-07-11 23:14:11

标签: javascript css gulp less

所以这个gulpfile的想法是用sourcemap渲染出一些CSS文件。尽管sourcemaps看起来不错,但CSS并没有呈现我想要的方式。我不希望从这些CSS文件中删除最后一个分号。

这里真的没有其他事情可以做,或者至少我不确定现在该朝哪个方向前进。

let fs = require("fs");
let gulp = require("gulp");
let less = require("gulp-less");
let lessAutoprefixer = require("less-plugin-autoprefix");
let lessLists = require("less-plugin-lists");
let sourcemaps = require("gulp-sourcemaps");
let cleanCSS = require("gulp-clean-css");
let gap = require("gulp-append-prepend");

let packageData = JSON.parse(fs.readFileSync("./package.json"));

const autoprefixer = new lessAutoprefixer({
  browsers: [
    "last 2 version",
    "safari 5",
    "ie 8",
    "ie 9",
    "opera 12.1",
    "ios 6",
    "android 4"
  ]
});

const cleanCSSOptions = {
  level: {
    1: {
      cleanupCharsets: true, // controls `@charset` moving to the front of a stylesheet; defaults to `true`
      normalizeUrls: true, // controls URL normalization; defaults to `true`
      optimizeBackground: true, // controls `background` property optimizations; defaults to `true`
      optimizeBorderRadius: true, // controls `border-radius` property optimizations; defaults to `true`
      optimizeFilter: true, // controls `filter` property optimizations; defaults to `true`
      optimizeFont: true, // controls `font` property optimizations; defaults to `true`
      optimizeFontWeight: true, // controls `font-weight` property optimizations; defaults to `true`
      optimizeOutline: true, // controls `outline` property optimizations; defaults to `true`
      removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
      removeNegativePaddings: true, // controls removing negative paddings; defaults to `true`
      removeQuotes: true, // controls removing quotes when unnecessary; defaults to `true`
      removeWhitespace: true, // controls removing unused whitespace; defaults to `true`
      replaceMultipleZeros: true, // contols removing redundant zeros; defaults to `true`
      replaceTimeUnits: true, // controls replacing time units with shorter values; defaults to `true`
      replaceZeroUnits: true, // controls replacing zero values with units; defaults to `true`
      roundingPrecision: false, // rounds pixel values to `N` decimal places; `false` disables rounding; defaults to `false`
      selectorsSortingMethod: "standard", // denotes selector sorting method; can be `'natural'` or `'standard'`, `'none'`, or false (the last two since 4.1.0); defaults to `'standard'`
      specialComments: "all", // denotes a number of /*! ... */ comments preserved; defaults to `all`
      tidyAtRules: true, // controls at-rules (e.g. `@charset`, `@import`) optimizing; defaults to `true`
      tidyBlockScopes: true, // controls block scopes (e.g. `@media`) optimizing; defaults to `true`
      tidySelectors: true, // controls selectors optimizing; defaults to `true`,
      semicolonAfterLastProperty: true, // (THIS RIGHT HERE DOES NOT WORK) controls removing trailing semicolons in rule; defaults to `false` - means remove
      transform: function() {} // defines a callback for fine-grained property optimization; defaults to no-op
    },
    2: {
      mergeAdjacentRules: true, // controls adjacent rules merging; defaults to true
      mergeIntoShorthands: true, // controls merging properties into shorthands; defaults to true
      mergeMedia: true, // controls `@media` merging; defaults to true
      mergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
      mergeSemantically: false, // controls semantic merging; defaults to false
      overrideProperties: true, // controls property overriding based on understandability; defaults to true
      removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
      reduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
      removeDuplicateFontRules: true, // controls duplicate `@font-face` removing; defaults to true
      removeDuplicateMediaBlocks: true, // controls duplicate `@media` removing; defaults to true
      removeDuplicateRules: true, // controls duplicate rules removing; defaults to true
      removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
      restructureRules: false, // controls rule restructuring; defaults to false
      skipProperties: [] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)
    }
  },
  format: "beautify"
};

const metaData = {
  src: "./src/lemonade.less",
  dev: {
    dist: "./dist"
  },
  prod: {
    dist: "./dist/min"
  },
  prependedText: `/*! ${packageData.name} (${packageData.version}) | ${packageData.license} | ${packageData.repository.url} */\n`
};

gulp.task("less:dev", async () => {
  return gulp
    .src(metaData.src)
    .pipe(gap.prependText(metaData.prependedText))
    .pipe(sourcemaps.init())
    .pipe(less({ plugins: [autoprefixer] }))
    .pipe(cleanCSS(cleanCSSOptions))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(metaData.dev.dist));
});

gulp.task("less:prod", async () => {
  return gulp
    .src(metaData.src)
    .pipe(gap.prependText(metaData.prependedText))
    .pipe(sourcemaps.init())
    .pipe(less({ plugins: [autoprefixer, lessLists] }))
    .pipe(
      cleanCSS(cleanCSSOptions, details => {
        console.log(
          `\nOriginal Size: ${details.name}: ${details.stats.originalSize}`
        );
        console.log(
          `Minified Size: ${details.name}: ${details.stats.minifiedSize}\n`
        );
      })
    )
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(metaData.prod.dist));
});

gulp.task("default", gulp.series(["less:dev", "less:prod"]));

所以我只是期待这样的事情。

html {
    background: blue;
    color: red; // <- this semicolon does not show.
}

任何帮助将不胜感激。

0 个答案:

没有答案