Создание стандартных и сжатых файлов CSS при использовании Gulp эффективно

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