使用Gulp编译Sass和缩小供应商css [英] Using Gulp to Compile Sass and minify vendor css

问题描述

因此，我有一个gulp CSS任务，如下所示：

  var sassDir ='app / scss'; 
 var targetCssDir ='public / assets'; 
 
 gulp.task（'css'，function（）{
 return gulp.src（sassDir +'/main.scss'）
 .pipe（sass 'bgb.pipe（autoprefix（'last 10 version'））
 .pipe（gulp.dest（targetCssDir））;; 
}）; 
  

但是有一种方法可以添加我的供应商文件，如Bootstrap，所以它将被包括进来以便缩小和连接。

希望你能建议。

解决方案

的两种解决方案。 最好的选择，我觉得，是使用 @import 语句在您的Sass文件中包括供应商文件。使用相对路径到他们住的地方，然后你可以按你想要的顺序。显然，这不工作使用SASS，除非你使用SASS导入。

---

或者，您也可以使用 流 和 gulp-concat 连接文件流。在这种情况下，您不应使用 gulp-sass 压缩文件，而应使用 gulp-csso 来处理压缩。

  var es = require -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））; 
 $ b b返回es.concat（vendorFiles，appFiles）
 .pipe（CONCAT（'输出文件name.css'））
 .pipe（autoprefix（最后版本10'））
 .pipe（gulp.dest（targetCssDir））; 
}）; 
  

同样，你应该如果你可以使用第一种方法，但是上课。 concat 对其他场景非常有用。

Getting to grips with Gulp and have a question.

So I have a gulp CSS task like the below which works just fine:

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));;
});

But is there a way to add my vendor files like Bootstrap so it will be included for minification and concatenation.

Hope you can advise.!

解决方案

I can think of two solutions. The best option, I feel, is to use @import statements within your Sass file to include the vendor files. Use relative paths to where they live, and you can then include them in the order you want. Apparently this doesn't work using SASS unless you are using SASS imports.

---

Alternatively, you can use event-stream and gulp-concat to concatenate streams of files. In this case, you should not use gulp-sass to compress the files, rather, use something like gulp-csso to handle the compression.

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));
});

Again, you should use the first method if you can, but es.concat is useful for other scenarios.

这篇关于使用Gulp编译Sass和缩小供应商css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！