Question

掌握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，因此它将包含在缩小和连接中。

希望你能提出建议。！

Answer 1

gulp-sass将满足您的要求。请允许我告诉您如何编译Sass文件并缩小（或压缩）已编译的css文件：

从here
在你的项目的gulpfile.js中，添加以下代码：

注意：gulp-sass中的outputStyle有四个选项：nested，expanded，compact，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

Answer 2

我可以想到两个解决方案。 ~~我觉得最好的选择是在Sass文件中使用@import语句来包含供应商文件。使用它们所在位置的相对路径，然后您可以按照所需的顺序包含它们。~~显然除非您使用SASS导入，否则使用SASS不起作用。

或者，您可以使用event-stream和gulp-concat来连接文件流。在这种情况下，您应该不使用gulp-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对其他方案非常有用。

Answer 3

我最近发现了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']
}))

使用Gulp编译Sass并缩小供应商css

3 个答案: