38

Gulp を理解して、質問があります。

だから私はうまく動作する以下のような一口CSSタスクを持っています:

var sassDir = 'app/scss';
var targetCssDir = 'public/assets';

gulp.task('css', function(){
    return gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));;
});

しかし、Bootstrap のようなベンダー ファイルを追加して、縮小と連結のために含める方法はありますか。

アドバイスいただければ幸いです。

4

3 に答える 3

81

gulp-sassがあなたのリクエストにお応えします。Pls は、Sass ファイルをコンパイルし、コンパイルされた css ファイルを縮小 (または圧縮) する方法を示します。

  • ここからgulp-sassをインストール
  • プロジェクトの gulpfile.js に、次のコードを追加します。

注: gulpnested -sass の outputStyle には、expanded、 、compact、の 4 つのオプションがあります。compressed

それは本当にうまくいきます、私は自分のプロジェクトでそれを使用しました。それが役に立てば幸い。

var gulp = require('gulp');
var sass = require('gulp-sass');

//sass
gulp.task('sass', function () {
    gulp.src(['yourCSSFolder/*.scss', 'yourCSSFolder/**/*.scss'])
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('yourCSSFolder/'));
});

// Default task
gulp.task('default', function () {
    gulp.start('sass');
});

readmeを思い出させるために

于 2014-12-24T09:44:29.107 に答える
23

私は2つの解決策を考えることができます。 最善の選択肢は、@importSass ファイル内でステートメントを使用してベンダー ファイルをインクルードすることだと思います。それらが存在する場所への相対パスを使用すると、それらを必要な順序で含めることができます。SASSインポートを使用していない限り、これは明らかにSASSを使用して機能しません。

または、 と を使用event-streamしgulp-concatてファイルのストリームを連結することもできます。この場合、 を使用してファイルを圧縮するのではなく、圧縮を処理するようなものを使用してください。gulp-sassgulp-csso

var es = require('event-stream'),
    concat = require('gulp-concat');

gulp.task('css', function(){
    var vendorFiles = gulp.src('/glob/for/vendor/files');
    var appFiles = gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log));

    return es.concat(vendorFiles, appFiles)
        .pipe(concat('output-file-name.css'))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));
});

繰り返しますが、可能であれば最初の方法を使用する必要がありますが、es.concat他のシナリオでは便利です。

于 2014-02-27T15:41:58.353 に答える