3

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

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

4

1 回答 1

1

我发现 gulp-cssnano非常慢，所以使用gulp -clean-css至少可以帮助加快速度。您可以使用gulp-if单独的variables模块来切换某些设置并两次调用相同的任务。所以它只调用renameand 'cssnano' ifisProduction = true和 liveReload 如果isProduction = false你可以使用它gulp-watch。我没有对此进行测试，但它应该可以工作！

变量.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/'));
});
于 2016-09-16T23:06:42.107 回答