38

掌握 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 这样添加我的供应商文件，以便将其包含在内以进行缩小和连接。

希望你能给点建议。！

4

3 回答 3

81

gulp-sass 将满足您的要求。请让我向您展示如何编译 Sass 文件并缩小（或压缩）已编译的 css 文件：

  • 从这里安装 gulp-sass
  • 在您项目的 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');
});

提醒自述文件

于 2014-12-24T09:44:29.107 回答
23

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

或者，您可以使用event-streamandgulp-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对于其他情况很有用。

于 2014-02-27T15:41:58.353 回答
2

我最近发现这个gulp-cssjoin 这允许你用内联 css 替换导入

scss

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

吞咽任务

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']
}))
于 2014-08-15T01:25:53.790 回答