使用咕嘟咕嘟時創建標準和壓縮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/')); 
});