使用咕嘟咕嘟时创建标准和压缩css文件有效

Question

我有我使用一饮而尽文件，它包含创建标准非压缩.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模块切换一些设置并调用相同的任务两次。所以它只调用rename和'cssnano'如果isProduction = true和liveReload如果isProduction = false所以你可以使用它与gulp-watch。我没有测试过，但它应该可以工作！

variables.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/')); 
});