web-dev-qa-db-ja.com

Gulp.jsイベントストリームのマージ順序

私は、cssファイルとscssファイルを、ビルドディレクトリにあるmain.cssファイルにマージしようとしています。その動作は正しい順序ではありません。 scssファイルのスタイル属性は、main.cssファイルの下部にある必要があるため、残りのファイルを無効にします。

私のGulpタスクは次のようになります：

    //CSS
gulp.task('css', function () {
    var cssTomincss = gulp.src(['dev/css/reset.css', 'dev/css/style.css','dev/css/typography.css',    'dev/css/sizes.css']);

    var cssFromscss = gulp.src(['dev/css/*.scss'])
        .pipe(sass());

    return es.merge(cssTomincss, cssFromscss)
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

まず、変数を使用してソースを定義しています。 gulp-sassプラグインを使用してscssファイルを通常のcss（.pipe（sass））に変換し、後で2つをes.merge関数でマージして、それらをmain.cssに連結しています。

問題は、.scssファイルのスタイル属性がmain.cssファイルの上端のどこかになってしまうことです。一番下にいる必要があります。したがって、それらは下部で連結する必要があります。

これを行う方法についての手がかりはありますか？

javascriptconcatenationgulpevent-streamgulp-sass
30
Jabba Da Hoot

streamqueue を試してください。

var streamqueue = require('streamqueue');

gulp.task('css', function () {
    return streamqueue({ objectMode: true },
            gulp.src(['dev/css/reset.css', 'dev/css/style.css', 'dev/css/typography.css', 'dev/css/sizes.css']),
            gulp.src(['dev/css/*.scss']).pipe(sass())
        )
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

このチートシート が役立ちます。 [〜＃〜] pdf [〜＃〜] はこちらです。

56
Tsutomu Kawamura

私はgulp-orderを試しましたが、成功しませんでした：順序はどういうわけか考慮されませんでした。

Aperç で言及されているstream-seriesを使用して解決策を見つけました。

return streamSeries(
    cssTomincss,
    cssFromscss)
    .pipe(concat('main.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'));
5
Blackbird

プラグインgulp-orderはあなたのケースに完全に適合しているようです。

これにより、たとえばコードに基づいて、渡されたstreamを独自のglobパターンで並べ替えることができます。

return es.merge(cssTomincss, cssFromscss)
    .pipe(order([
      'dev/css/reset.css',
      'dev/css/style.css',
      'dev/css/typography.css',
      'dev/css/sizes.css',
      'dev/css/*.css',
    ]))
    .pipe(concat('main.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))

これの1つの欠点は、globsを再宣言する必要があることですが、globsを値に割り当てて、それらをorderパイプに連結することで回避できます。 、はるかにきれい。

baseオプションを. ofgulp-orderに設定する必要がある場合があります。これは、ファイルの順序が正しくない場合、Readmeに記載されています。

もう1つの方法は、stream-seriesを使用することです。基本的にはevent-streamと同じですただし、ストリームの順序は保持されるため、globsを書き換える必要はありません。

5
Balthazar

私はすべての提供された答えで失敗しました、それらはいくつかのサイレントエラーを生成しました。最後に merge2 がうまくいきました（gulp-mergeがあったようで、後でプロジェクトの名前がmerge2に変更されました）。 streamify プラグインが必要な理由がわかりません。 Rollupで作成されたストリームは、gulp-concat、gulp-uglify、またはgulp-insertを使用して「stream-not-supported-errors」を生成する場合があります。

const mergeStreams = require('merge2');
const streamify = require('streamify');
...
gulp.task('build', () => {
    const streams = sources.map(createJSFile);
    return mergeStreams(...streams)
        .pipe(streamify(concat('bundle.js')))
        .pipe(streamify(uglify()))
        .pipe(gulp.dest('./dist'));
});
0
Alexander Shutau