web-dev-qa-db-ja.com

sass後の連結

Sassの出力を取得して、それを別のcss通常ファイルに連結したいと思います。

例：

animate.css
app.scss

return gulp.src('app.scss')
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE]))
    .pipe(gulp.dest(paths.public+'css/'))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('css/'))
    .on('end', done);

それを行う方法のアイデアはありますか？

******* 考え

おそらく、sassから一時的な場所にcssファイルを生成し、それをcssファイルと連結して、単にそれを削除することは可能です。単一のタスクでそれを行う方法のアイデアはありますか？

sassgulpconcatgulp-concat
13
Tzook Bar Noy

gulp-concatは、現在のストリーム内でgulp.srcによって指定されたファイルのみを連結します。 app.scssのみを指定した場合、thatストリームで追加のファイルを連結することはできません。

これは、app.scssコンパイル済み出力を含み、animate.cssも含むnewストリームを作成できないことを意味しません。

これを行うには、 merge-stream （npm install merge-stream）が必要です。

var gulp,
    sass,
    merge,
    concat,
    rename;

//load dependencies
gulp = require('gulp');
sass = require('gulp-sass');
merge = require('merge-stream');
concat = require('gulp-concat');
rename = require('gulp-rename');

//define default task
gulp.task('default', function () {
    var sassStream,
        cssStream;

    //compile sass
    sassStream = gulp.src('app.scss')
        .pipe(sass({
            errLogToConsole: true
        }));

    //select additional css files
    cssStream = gulp.src('animate.css');

    //merge the two streams and concatenate their contents into a single file
    return merge(sassStream, cssStream)
        .pipe(concat('app.css'))
        .pipe(gulp.dest(paths.public + 'css/'));
});
31
zzzzBov

メインのSassファイルのパーシャルとしてanimate.cssを含めないのはなぜですか？

@import "animate";

そして、animate.cssの名前を_animate.cssに変更します。

また、CSSのコンパイル方法/場所をより詳細に制御できます。

14
Lisa