30

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)) に変換し、後で es.merge 関数を使用して 2 つをマージし、それらを main.css に連結しています。

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

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

4

4 に答える 4

56

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はこちら

于 2014-09-29T11:23:34.553 に答える
1

提供されたすべての回答に失敗しました。サイレントエラーが発生しました。最後に、 merge2 が機能しました (あったようでgulp-merge、後でプロジェクトの名前が に変更されましたmerge2)。streamifyプラグインが必要な理由がわかりません。たとえば、Rollup で作成されたストリームはgulp-concat、 、gulp-uglifyまたはgulp-insert.

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'));
});
于 2017-06-26T14:18:01.707 に答える