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

我有一个我使用的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());
 });

var gulp=require（'gulp'）；
var cssnano=需要（'gulp-cssnano'）；
var管道工=需要（“大口管道工”）；
var POSTSSS=需要（“大容量后处理”）；
var rename=require（'gulp-rename'）；
var sass=需要（'gulp-sass'）；
var sourcemaps=require（'gulp-sourcemaps'）；
var-uglify=需要（'gulp-uglify'）；
var livereload=需要（'GLUP-livereload'）；
var autoprefixer=require（'autoprefixer'）；
var ap_选项={
浏览器：[
“最近4个Chrome版本”，
“最近4个Firefox版本”，
“最后4个边缘版本”，
“最近2个Safari版本”，
'ie>=10'，
'> 1.49%',
“不是ie我发现gulp cssnano so使用至少有助于加快速度。你可以使用
gulp if
和一个单独的
variables
模块切换一些设置并调用同一任务两次。因此，如果
isProduction=true
它只调用
rename
和'cssnano'，如果
isProduction=falseode>因此您可以将其与
gulp watch
一起使用。我还没有测试过它，但它应该可以工作

variables.js

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

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())));
});

gulpfile.js

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

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

与从未压缩版本构建最小版本相比，从SCS构建两个CSS文件需要多长时间？@Barryman9000不太确定，我想我可以做一些测试。但主要问题是我在工作时使用的电脑比我的家用电脑慢得多，我正试图加快这个过程，因为它有点慢。谢谢你的建议-问题是，如果可能的话，我仍然希望创建这两个文件，因为网站使用压缩文件，但我也希望生成非压缩文件，以防我需要查看某个css块是如何生成的。如果运行
build
任务，它将创建这两个文件。
set-*
任务将只设置中使用的变量ode>css
任务。怎么回事？据我所知，它将创建一个文件，如果是生产版，则为压缩版本，如果不是生产版，则为未压缩版本。哦，好吧……。我对
runSequence
不太熟悉，也不知道
css
任务运行了两次。但糟糕的是，这仍然有问题与我的初始版本一样，必须处理两次scss文件的开销。好的，只是看了一下您的编辑……。但是看起来您仍然在运行两次
sass
编译？是否不可能运行一次，将结果保存到未压缩的版本，然后创建缩小的版本？…或者这不会在h创建正确的源映射？