Using Gulp to Compile Sass and minify vendor css

问题

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.!

回答1:

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

install gulp-sass from here
in you project's gulpfile.js, add following code:

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

For reminder the readme

回答2:

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.

回答3:

i found this recently gulp-cssjoin this allows you to replace imports with inline css

the scss

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

the gulp task

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

the important part is the passing in of the paths

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

来源：https://stackoverflow.com/questions/22069515/using-gulp-to-compile-sass-and-minify-vendor-css

标签

css

Sass

gulp