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

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文件:

• 从这里安装gulp-sass
• 在你的项目的gulpfile.js中,添加以下代码:

注: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');
});

提醒自述

Answer 2

我能想到两个解决方案. 我觉得最好的选择是使用@importSass文件中的语句来包含供应商文件.使用相对路径到他们居住的地方,然后您可以按照您想要的顺序包含它们. 显然,除非您使用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对其他方案很有用.