Question

我有一个大的缩小的css文件和一个小的非缩小文件。我将定期更改非缩小文件，但我希望它们合并在一起。但是，重新缩小大型缩小文件需要花费太长时间。

我想要的是这样......

var cssnano = require('gulp-cssnano');
var cssjoin = require('gulp-cssjoin');

gulp.task('cssjoin', function() {
    gulp.src( 'changing.css' )
    .pipe(cssnano())
    .pipe(rename( 'changed.min.css' ))
    .pipe(gulp.dest( '.' ));

    gulp.src( ['big.min.css','changed.min.css'] )
        .pipe(cssjoin())
        .pipe(gulp.dest( 'final.min.css' ))
});

基本上，首先缩小小文件，然后将其加入大文件的末尾。上面的代码当然不起作用，任务在函数中需要return等等。

我也想在连接完成后删除'changed.min.css'。

我尝试了3个小时的各种组合而没有找到可行的解决方案。如何解决这个问题？

Answer 1

您可以使用gulp-add-src将big.min.css附加到流中。这样，您只能在cssnano()上运行changed.css，而不是两个文件。

然后您使用gulp-concat将两个文件合并为一个新的final.min.css：

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');

gulp.task('cssjoin', function() {
  return gulp.src('changing.css')
    .pipe(cssnano())
    .pipe(addsrc.append('big.min.css'))
    .pipe(concat('final.min.css'))
    .pipe(gulp.dest('.'));
});

由于没有写入磁盘，因此无需删除中间件changed.min.css。所有操作都在内存中进行。

在Gulp中，如何缩小css文件，然后将其附加到已经缩小的css文件中？

1 个答案: