問題描述

掌握 Gulp 并提出問題.

Getting to grips with Gulp and have a question.

所以我有一個類似下面的 gulp CSS 任務，它工作得很好:

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

但是有沒有辦法像 Bootstrap 這樣添加我的供應商文件，以便將其包含在內以進行縮小和連接.

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

希望你能給點建議！

推薦答案

gulp-sass 將滿足您的要求.請讓我向您展示如何編譯 Sass 文件并縮小(或壓縮)已編譯的 css 文件:

gulp-sass will meet your request. Pls let me show you how to compile Sass files and minify (or compress) compiled css files:

• 從這里
安裝 gulp-sass
• 在您項目的 gulpfile.js 中，添加以下代碼:

注意:outputStyle 在 gulp-sass 中有四個選項:nested、expanded、compact、compressed

Note: outputStyle in gulp-sass has four options: nested, expanded, compact, compressed

它確實有效，我在我的項目中使用過它.希望對您有所幫助.

It really works, I have used it in my project. Hope it helps.

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

提醒一下自述文件

這篇關于使用 Gulp 編譯 Sass 并縮小供應商 css的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！