[英]Optimizing CSS with cssnano advanced transforms using Gulp + PostCSS
My current working gulpfile.js:我目前的工作 gulpfile.js:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
cssnano()
];
return gulp.src('css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('css/min/'));
});
Gulp pipes all the CSS to PostCSS which runs them through cssnano, and they all land in css/min . Gulp 将所有 CSS 管道传输到 PostCSS,后者通过 cssnano 运行它们,它们都以css/min的速度降落。 Nice.好的。
How do I get cssnano to use advanced transforms?如何让 cssnano 使用高级转换?
Ideally, with vars, or parameter objects instead of extarnal config scripts.理想情况下,使用 vars 或参数对象而不是外部配置脚本。 I think the anwser might be on this cssnano guide page , but I don't know how to make it work with Gulp+PostCSS.我认为 anwser 可能在这个 cssnano 指南页面上,但我不知道如何使它与 Gulp+PostCSS 一起工作。
You can pass options to the cssnano function, so I believe it is a matter of the following:您可以将选项传递给 cssnano function,所以我相信这是以下问题:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
cssnano({
preset: ['advanced', {
// preset options here, e.g...
discardComments: { removeAll: true }
}]
})
];
return gulp.src('css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('css/min/'));
});
Obviously ensure you've got cssnano-preset-advanced
first via npm install cssnano-preset-advanced --save-dev
显然,确保您首先通过npm install cssnano-preset-advanced --save-dev
获得cssnano-preset-advanced
-preset-advanced
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.