Question

我有一个gulp文件，我使用它包含一个创建标准非压缩 .css文件和压缩 {{1}的文件的进程文件我曾经简单地通过缩小刚刚生成的非压缩版本来生成压缩版本，但这会导致映射指向非压缩.css文件而不是.css文件的问题，因为它从未实际工作过关闭.scss个文件。

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

以下是我.scss的相关部分：

gulpfile.js

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

Answer 1

我发现gulp-cssnano was super slow所以使用gulp-clean-css至少可以帮助加快速度。您可以使用gulp-if和单独的variables模块切换一些设置并调用相同的任务两次。所以它只调用rename和＆＃39; cssnano＆＃39; if isProduction = true和liveReload if 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/')); });

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

1 个答案: