使用 Gulp 保留原始文件

Question

我刚开始使用 Gulp。此代码用于将 scss 文件压缩为 css。我不知道如何保持其中一个 css 文件未压缩。

这就是我想要的：

/assets/css/custom.css
/assets/css/custom.min.css

代码：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('assets/scss/custom.scss')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('./assets/css/'));
});

gulp.task('default',function() {
    gulp.watch('assets/scss/**/*.scss',['styles']);
});

Answer 1

你可以做的是扩展你的任务，让它写出未压缩的版本，然后压缩它，重命名它，最后再写出来。

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');

gulp.task('styles', function() {
    gulp.src('assets/scss/custom.scss')
        .pipe(sass())
        .pipe(gulp.dest('./assets/css/'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('./assets/css/'));
});

请注意，您需要将gulp-rename插件添加到您的依赖项中。您还可以使用专用的 minifier（例如 gulp - minify -css）而不是 SASS 插件来缩小您的 CSS。