所以这个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.
}
任何帮助将不胜感激。