CODEWITHSUNDEEP
csssassgulp
Lee
Lee

Reputation: 20914

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

Upvotes: 38

Views: 59593

Answers (4)

aisin
aisin

Reputation: 1097

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.

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

Upvotes: 81

Vu Anh
Vu Anh

Reputation: 21

You can convert scss files to min.css with just one simple task

const { series, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCss = require("gulp-clean-css");
var rename = require("gulp-rename");

function minCss() {
  return src("scss/*.scss")
    .pipe(sass())
    .pipe(
      rename(function (file) {
        file.basename = file.basename + ".min";
      })
    )
    .pipe(cleanCss())
    .pipe(dest("css"));
}

exports.watch = series(minCss);

Upvotes: 1

Tristan Smith
Tristan Smith

Reputation: 39

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

Upvotes: 1

OverZealous
OverZealous

Reputation: 39560

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.

Upvotes: 23

Related Questions