我有一个gulp任务,它可以缩小CSS文件并将它们连接到一个文件:
gulp.task('minify-css', function() { 'use strict'; var pathsToMinifyAndConcat = [ 'css/index.css' ]; var pathsToConcatOnly = [ 'lib/css/font-awesome-4.3.0/font-awesome.min.css' ]; var minifyFiles = require('gulp-cssnano'); var concatAllFilesToOneFile = require('gulp-concat'); return gulp.src( [] .concat(pathsToMinifyAndConcat) .concat(pathsToConcatOnly) ) .pipe(minifyFiles()) .pipe(concatAllFilesToOneFile('application.min.css')) .pipe(gulp.dest('dist')); });
但是,如果某些文件已经缩小(font-awesome.min.css
例如),则不应再次缩小 - 它应该只是连接,并且应该从缩小过程中省略.有没有办法在没有hacky解决方案的情况下做到这一点(我不想使用我无法完全理解的解决方案 - 而且我很擅长吞咽)保留文件顺序?我找到了一个插件来在管道中的任何一点添加src文件:gulp-add-src,但它似乎暂时无效.
做你想做的事的方法不止一种.我会举两个例子.
第一:
var gulp = require('gulp'); var minify = require('gulp-cssnano'); var concat = require('gulp-concat'); var merge = require('merge-stream'); gulp.task('minify-css', function() { var pathsToMinify = [ 'css/style1.css' ]; var pathsToConcat = [ 'css/style2.css' ]; var minStream = gulp.src(pathsToMinify) .pipe(minify()); var concatStream = gulp.src(pathsToConcat) return merge(minStream, concatStream) .pipe(concat('all.css')) .pipe(gulp.dest('dist')); });
在此示例中,它创建了两个不同的流.一个是缩小的,另一个不是.最后,将这两个流合并,连接,然后将文件写入磁盘.
第二:
var gulp = require('gulp'); var minify = require('gulp-cssnano'); var concat = require('gulp-concat'); var gulpFilter = require('gulp-filter'); gulp.task('minify-css', function() { var paths = [ 'css/style1.css', 'css/style2.css' ]; // Files to minify. var filter = gulpFilter([ 'style1.css' ], { restore: true }); return gulp.src(paths) .pipe(filter) .pipe(minify()) .pipe(filter.restore) .pipe(concat('all.css')) .pipe(gulp.dest('dist')); });
在这个例子中,只创建了一个流,但是通过gulp-filter过滤了乙烯基文件对象,并且只过滤了过滤的那些.然后,管道中最初的所有文件都使用filter.restore进行恢复并连接.
还有其他可能性,比如创建两个不同的任务,其中一个只是缩小而另一个连接,但是使用这种方法,您需要在磁盘中临时写入缩小的文件.