14

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 ファイルと連結して、単純に削除することは可能でしょうか。単一のタスクでそれを行う方法はありますか?

4

2 に答える 2

31

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

これは、コンパイルされた出力とインクルードを含む新しいストリームを作成できないという意味ではありません。app.scssanimate.css

これを行うには、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/'));
});
于 2015-06-11T14:01:49.113 に答える