gulp - 高效使用 Gulp 时创建标准和压缩的 css 文件

Question

我有一个我使用的 gulp 文件，它包含一个创建标准非压缩 .css 文件和一个压缩 的过程.css 文件；我过去只是通过缩小刚刚生成的非压缩版本来生成压缩版本，但是这导致映射指向非压缩 .css 文件而不是 .scss 文件，因为它实际上从未处理过 .scss 文件。

所以我更改了它，以便两个进程现在都使用 .scss 文件，但这看起来效率很低，因为它们都必须经过相同的进程才能构建各自的文件。

这是我的 gulpfile.js 的相关部分:

 var gulp = require('gulp');
 var cssnano = require('gulp-cssnano');
 var plumber = require('gulp-plumber');
 var postcss = require('gulp-postcss');
 var rename = require('gulp-rename');
 var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 var livereload = require('gulp-livereload');
 var autoprefixer = require('autoprefixer');

 var ap_options = {
     browsers: [
         'last 4 Chrome versions',
         'last 4 Firefox versions',
         'last 4 Edge versions',
         'last 2 Safari versions',
         'ie >= 10',
         '> 1.49%',
         'not ie <= 9'
     ],
 };

 gulp.task('postcss', function() {
     return gulp.src('scss/*.scss')
         .pipe(plumber()) // Deal with errors.
         .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap.
         .pipe(sass({ // Compile Sass using LibSass.
             errLogToConsole: true,
             outputStyle: 'expanded' // Options: nested, expanded, compact, compressed
         }))
         .pipe(postcss([ // Parse with PostCSS plugins.
             autoprefixer(ap_options),
         ]))
         .pipe(sourcemaps.write('../maps')) // Create sourcemap.
         .pipe(gulp.dest('./css/')) // Create style.css.
         .pipe(livereload());
 });

 gulp.task('cssnano', ['postcss'], function() {
     return gulp.src('scss/*.scss')
         .pipe(plumber()) // Deal with errors.
         .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap.
         .pipe(sass({ // Compile Sass using LibSass.
             errLogToConsole: true,
             outputStyle: 'compressed' // Options: nested, expanded, compact, compressed
         }))
         .pipe(postcss([ // Parse with PostCSS plugins.
             autoprefixer(ap_options),
         ]))
         .pipe(cssnano({ // Minify CSS
             safe: true // Use safe optimizations
         }))
         .pipe(rename({ suffix: '.min' })) // Append our suffix to the name
         .pipe(sourcemaps.write('../maps')) // Create sourcemap.
         .pipe(gulp.dest('./css/')) // Create style.min.css.
         .pipe(livereload());
 });

有没有一种更有效的方法可以为非压缩 和压缩 版本创建正确的映射文件？

Answer 1

我发现 gulp-cssnano was super slow所以使用gulp-clean-css至少可以帮助加快速度。您可以使用 gulp-if 和一个单独的 variables 模块来切换某些设置并调用同一任务两次。所以它只在 isProduction = true 时调用 rename 和 'cssnano'，在 isProduction = false 时调用 liveReload，所以你可以将它与 gulp 一起使用-观看。我还没有测试过这个，但它应该可以工作!

变量.js

module.export = {
    isProduction = false,
    outputStyle = 'expanded'
};

gulpfile.js

var vars = require('./variables'),
    runSequence = require('run-sequence')
    gulpif = require('gulp-if');

gulp.task('build', () => {
    runSequence('set-dev', 'css', 'set-prod', 'css');
});

gulp.task('set-dev', () => {
    vars.isProduction = false;
    vars.outputStyle = 'expanded';
});

gulp.task('set-prod', () => {
    vars.isProduction = true;
    vars.outputStyle = 'compressed';
});

gulp.task('css', function() {
    return gulp.src('scss/*.scss')
        .pipe(plumber()) // Deal with errors.
        .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap.
        .pipe(sass({ // Compile Sass using LibSass.
            errLogToConsole: true,
            outputStyle: vars.outputStyle // Options: nested, expanded, compact, compressed
        }))
        .pipe(postcss([ // Parse with PostCSS plugins.
            autoprefixer(ap_options),
        ]))
        .pipe(gulpif(vars.isProduction(cssnano({ // Minify CSS
            safe: true // Use safe optimizations
        }))))
        .pipe(gulpif(vars.isProduction(rename({ suffix: '.min' })))) // Append our suffix to the name
        .pipe(sourcemaps.write('../maps')) // Create sourcemap.
        .pipe(gulp.dest('./css/')) // Create style.min.css.
        .pipe(gulpif(!vars.isProduction(livereload())));
});

编辑

从一项任务中输出正常和压缩的 CSS。你真的只需要两个目的地

var gulp = require('gulp'),
    $ = require('gulp-load-plugins')();

gulp.task('css', function() {
    return gulp.src('scss/*.scss')
        .pipe(plumber()) // Deal with errors.
        .pipe($.sourcemaps.init()) // Wrap tasks in a sourcemap.
        .pipe($.sass({ // Compile Sass using LibSass.
            errLogToConsole: true,
            outputStyle: "expanded" // Options: nested, expanded, compact, compressed
        }))
        .pipe($.sourcemaps.write()) // Create sourcemap.
        .pipe(gulp.dest('./css/')) // Create style.min.css.
        //** MIN VERSION HERE
        .pipe($.sass({ // Compile Sass using LibSass.
            errLogToConsole: true,
            outputStyle: "compressed" // Options: nested, expanded, compact, compressed
        }))
        .pipe($.cleanCss({
            keepSpecialComments: '*',
            spaceAfterClosingBrace: true
        }))
        .pipe($.rename({ suffix: '.min' })) // Append our suffix to the name
        .pipe(gulp.dest('./css/'));
});