web-dev-qa-db-ja.com

Gulpを使用してSassをコンパイルし、ベンダーのCSSを縮小する

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

だから私はうまく動作する以下のような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のようなベンダーファイルを追加する方法はありますか？.

アドバイスをお願いします。！

csssassgulp
32
Lee

gulp-sassがあなたの要求に応えます。 Plsでは、Sassファイルをコンパイルし、コンパイルされたcssファイルを縮小（または圧縮）する方法を示します。

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

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

本当に機能します。プロジェクトで使用しました。それが役に立てば幸い。

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

60
aisin

私は2つの解決策を考えることができます。 最良のオプションは、Sassファイル内で@importステートメントを使用してベンダーファイルを含めることです。それらが存在する場所への相対パスを使用すると、必要な順序でそれらを含めることができます。 SASSインポートを使用していない限り、SASSを使用してこれは機能しないようです。

または、 event-stream および gulp-concat を使用して、ファイルのストリームを連結できます。この場合、notgulp-sassを使用してファイルを圧縮し、gulp-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は他のシナリオで役立ちます。

23
OverZealous

私は最近これを見つけました gulp-cssjoin これにより、インポートをインラインcssに置き換えることができます

scss

@import '../../bower_components/angular/angular-csp.css';

gulpタスク

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-Ruby-sass'),
    cssjoin = require('gulp-cssjoin'),
    csscomb = require('gulp-csscomb');

gulp.task('sass',['images'], function() {
  return gulp.src('src/sass/*.{sass,scss}')
    .pipe(sass({
      compass: true,
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../src/sass'
    }))
    .on('error',gutil.log.bind(gutil, 'Sass Error'))
    .pipe(cssjoin({
      paths: ['./src/sass']
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('build'));
});

重要な部分は、パスの通過です

.pipe(cssjoin({
  paths: ['./src/sass']
}))
2
Tristan Smith