[英]gulp-postcss: conditional options (optimizations)
I learned the list of cssnano optimizations : it includes autoprefixer
(not default), cssnano-util-raw-cache
, etc. 我了解了cssnano优化的列表 :它包括
autoprefixer
(不是默认值), cssnano-util-raw-cache
等。
Next I look the gulp-postcss documentation : it has the following example: 接下来,我看一下gulp-postcss文档 :它具有以下示例:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
autoprefixer({browsers: ['last 1 version']}),
cssnano()
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
Well, although it has been said that autoprefixer
is one of cssnano
optimizations, in the above example it was defined separately. 好吧,尽管已经有人说自动
autoprefixer
是cssnano
优化中的一种, cssnano
在上面的示例中它是单独定义的。 However, I can't to understand from the above example, how to set the desired optimizations from the first link (list of cssnano optimizations). 但是,我不能从上面的示例中了解如何从第一个链接(cssnano优化列表)中设置所需的优化。
E. g. 例如 I want to use
postcss-calc
in both development and production builds, however I need to use postcss-normalize-whitespace
only in production build. 我想在开发和生产版本中都使用
postcss-calc
,但是我只需要在生产版本中使用postcss-normalize-whitespace
。 How I should to complete the below code? 我应该如何完成以下代码?
const gulp = require('gulp'),
gulpIf = require('gulp-if'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss');
const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'develpment';
gulp.task('styles', function(){
// first the optimizations for both Development and production
let plugins = [
autoprefixer({ browsers: ['>= 1%', 'last 5 major versions', 'ie >= 6']}),
// ...
];
if (isDevelopment) {
plugins.push(/* plugins for development build */);
}
else {
plugins.push(/* plugins for production build */);
}
return gulp.src(HPath.sassSourceFilesSelection)
.pipe(gulpIf(isDevelopment, sourcemaps.init()))
.pipe(sass())
.pipe(postcss(plugins))
// ...
});
let PostCssPlugins = [
// non-conditional
require('cssnano-util-raw-cache')(),
// conditional
!options.isDevelopment ? require('postcss-normalize-whitespace')() : false
].filter(Boolean);
return gulp.src(sassFilesSelection)
.pipe(plugins.sass())
.pipe(plugins.postcss(PostCssPlugins))
.pipe(gulp.dest(outputPath));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.