在连接和缩小期间不要缩小已经缩小的文件答案

【问题标题】：Do not minify already minified files during concatenation and minification在连接和缩小期间不要缩小已经缩小的文件
【发布时间】：2015-12-30 16:59:57
【问题描述】：

我有一个 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 解决方案（我不想使用我不能完全理解的解决方案 - 而且我对 gulp 很陌生）有保留文件顺序的方法吗？我找到了一个插件，可以在管道中的任何位置添加 src 文件：gulp-add-src，但它似乎有一段时间不活动。

【问题讨论】：

标签： gulp minify bundling-and-minification gulp-concat

【解决方案1】：

有不止一种方法可以做你想做的事。我给你举两个例子。

第一：

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 恢复并连接起来。

还有其他可能性，例如创建两个不同的任务，其中一个只是缩小，另一个连接，但使用这种方法，您需要将缩小的文件临时写入磁盘。

【讨论】：

【解决方案2】：

像往常一样迟到，但另一种选择是使用gulp-if 有条件地缩小文件。这样的事情应该可以工作：

const gulp = require('gulp'),
  gulpif = require('gulp-if'),
  concat = require('gulp-concat'),
  minifyCss = require('gulp-cssnano');

gulp.task('css', function () {
  gulp.src([
    'css/index.css',
    'lib/css/font-awesome-4.3.0/font-awesome.min.css'
  ])
    .pipe(gulpif(file => !(file.path.includes('.min.css')), minifyCss()))
    .pipe(concat('app.min.css'))
    .pipe(gulp.dest('dist'));
});

希望这会有所帮助！

【讨论】：