使用Gulp編譯Sass並縮小供應商的css

所以我有一個大口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));; 
});

但是，有沒有辦法添加像引導我的供應商的文件，所以它會被列入縮小和拼接。

希望你能指教。

來源

2014-02-27 Lee

我可以想到兩個解決方案。 ~~我覺得最好的選擇是在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對其他方案很有用。

來源

2014-02-27 15:41:58 OverZealous

我覺得不太可能的供應商檔案的OP要包括縮小的目的是無禮的文件，否則他們很可能會包括它作爲你的建議。 Sass無法像使用Sass文件一樣導入CSS文件（請參閱：http：// stackoverflow。COM /問題/ 16947337 /罐-I-進口的，外部託管的文件與 - 薩斯）。 – cimmanon

謝謝OverZeous。使用@import只是echo在css文件中輸出，所以這沒有用。我不喜歡有src文件的唯一的事情是它們加載的順序。當然，我可以將它們作爲前綴，即01_bootstrap.css。 – Lee

這太糟糕了，少了一個可以包含任何文件的替代術語（'include'）。第二個解決方案仍然有幫助。您可以使用數組指定[multiple'src'文件]（https://github.com/gulpjs/gulp/blob/master/docs/API.md#globs）來控制順序。 – OverZealous

，我發現這個最近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-15 01:25:53

gulp-sass將滿足您的要求。請讓我來告訴你如何編譯薩斯文件和縮小（或壓縮）編譯的css文件：

從here
安裝一飲而盡 - 薩斯在你項目的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'); 
});

對於提醒的readme

來源

2014-12-24 09:44:29 aisin

使用Gulp編譯Sass並縮小供應商的css

回答

相關問題