0

CSS ファイルを縮小して 1 つのファイルに連結する gulp タスクがあります。

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たとえば)、再度縮小する必要はありません。連結するだけで、縮小プロセスから除外する必要があります。ハッキーなソリューションなしでそれを行う方法はありますか(私は完全に理解できないソリューションを使用したくありません。パイプラインの任意の時点で src ファイルを追加するプラグインを見つけました: gulp-add-srcですが、しばらくの間非アクティブになっているようです。

4

2 に答える 2

11

あなたが望むことをする方法は複数あります。2つの例を挙げます。

初め：

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

});

この例では、2 つの異なるストリームが作成されます。1つは縮小され、もう1つは縮小されていません。最後に、これら 2 つのストリームがマージされ、連結されてから、ファイルがディスクに書き込まれます。

2番：

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

});

この例では、ストリームが 1 つだけ作成されますが、ビニール ファイル オブジェクトは gulp-filter によってフィルター処理され、フィルター処理されたものだけが縮小されます。次に、元々パイプラインにあったすべてのファイルが filter.restore で復元され、連結されます。

1 つだけを縮小し、もう 1 つを連結する 2 つの異なるタスクを作成するなど、他の可能性もありますが、このアプローチでは、縮小されたファイルを一時的にディスクに書き込む必要があります。

于 2015-12-30T21:50:14.437 に答える