Не Минимизировать уже уменьшенные файлы во время конкатенации и Минимизации

Question

У меня есть задача глотка, который minifies 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, но, похоже, он неактивен некоторое время.

Answer 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')); 

}); 

В этом примере только один поток создается, но объекты винилового файла фильтруется Глоток-фильтр и только отфильтрованные из них минимизированы. Затем все файлы, первоначально созданные в конвейере, восстанавливаются с помощью filter.restore и конкатенированы.

Существуют и другие возможности, такие как создание двух различных задач, в которых вы просто минимизируете, а другие объединяются, но при таком подходе вам нужно будет временно записать мини-файлы на диск.

Answer 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')); 
}); 

Надеюсь, что это поможет!