How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

Question

I'm having trouble with my gulpfile and can't figure out what's going wrong.

Issues: autoprefixer not working as intended, and it isn't always properly outputting a .css and .min.css file as intended.

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var config = {
    sassMain: 'style/Main.scss',
    sassFiles: 'style/**/*.scss',
    cssfiles: ['style/Main.css'],
    dest: 'style',
    autoprefixerOptions: {
    browsers: ['last 2 versions', '> 5%']
    }
};

gulp.task('compile-sass', function () {
    return gulp.src(config.sassMain)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix(config.autoprefixerOptions.browsers))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
});

gulp.task('default', function () {
    gulp.watch(config.sassFiles, ['compile-sass']);
});

Any ideas?

Answer 1

First, I recommend putting all source files into folder src and built files into build. This works below, and you can incrementally add new pipes to see what breaks it

gulpfile.js

var gulp = require('gulp')
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer')
var minCss = require('gulp-minify-css')
var rename = require('gulp-rename')

var config = {
   srcCss : 'src/scss/**/*.scss',
   buildCss: 'build/css'
}

gulp.task('build-css', function(cb) {
   gulp.src(config.srcCss)

      // output non-minified CSS file
      .pipe(sass({
         outputStyle : 'expanded'
      }).on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest(config.buildCss))

      // output the minified version
      .pipe(minCss())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(config.buildCss))

   cb()
})

gulp.task('watch', function(cb) {
   gulp.watch(config.srcCss, ['build-css']) 
})

gulp.task('default', ['build-css', 'watch'])

main.scss

$degrees: '50%';

.rotated {
    transform: $degrees;
}

package.json

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.0"
  }
}

Resulting File Structure

Here's what you'll have after you run $ gulp (excludes node_modules folder)

$ tree -I node_modules
.
├── build
│   └── css
│       ├── main.css
│       └── main.min.css
├── gulpfile.js
├── package.json
└── src
    └── scss
        └── main.scss

4 directories, 5 files

My Environment

$ node -v
v5.1.0

$ npm -v
3.3.12

$ gulp -v
[13:39:54] CLI version 1.0.0
[13:39:54] Local version 3.9.0