Verwenden von Gulp zum Kompilieren von Sass und Minimieren von Kreditor css

Question

Mit Gulp in den Griff bekommen und eine Frage haben.

So habe ich einen Schluck CSS Aufgabe wie die, unter dem funktioniert gut:

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

Aber gibt es eine Möglichkeit, meine Herstellerdateien wie Bootstrap hinzufügen, so wird es für minification und Verkettung enthalten sein.

Ich hoffe, Sie können beraten.!

Answer 1

Ich kann mir zwei Lösungen vorstellen. Die beste Option, glaube ich, ist es, @import Anweisungen in Ihrer Sass-Datei zu verwenden, um die Herstellerdateien einzuschließen. Verwenden Sie relative Pfade zu ihrem Wohnort, und Sie können sie dann in der von Ihnen gewünschten Reihenfolge einfügen. Scheinbar funktioniert das nicht mit SASS, es sei denn, Sie verwenden SASS-Importe.

---

Alternativ können Sie event-stream und gulp-concat verketten Ströme von Dateien verwenden. In diesem Fall sollten Sie nichtgulp-sass verwenden, um die Dateien zu komprimieren, sondern etwas wie gulp-csso verwenden, um die Komprimierung zu verarbeiten.

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

Auch hier sollten Sie die erste Methode verwenden, wenn Sie können, aber es.concat ist für andere Szenarien nützlich.

Answer 2

ich fand dieses kürzlich gulp-cssjoin diese Sie Importe mit Inline-CSS

die SCSS

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

der Zug zu ersetzen erlaubt Aufgabe

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

der wichtige Teil ist die Weitergabe in der die Wege

.pipe(cssjoin({ 
    paths: ['./src/sass'] 
})) 

Answer 3

gulp-sass wird Ihre Anfrage erfüllen. Pls lassen Sie mich Ihnen zeigen, wie Sass-Dateien kompilieren und minify (oder komprimieren) zusammengestellt CSS-Dateien:

• installieren schluck-Sass von here
• in ihr Projekt gulpfile.js, fügen Sie folgenden Code:

Hinweis: outputStyle in schluck-Sass hat vier Optionen: nested, expanded, compact, compressed

es wirklich funktioniert, habe ich es in meinem Projekt verwendet. Ich hoffe es hilft.

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

Für Erinnerung die readme