Gulpfile.js - how to get .min.css, .css, and .css.map files on gulp.watch?

Question

Ok, I've done lots of research on this, but on a drupal site, I have a zurb foundation theme and am super happy with it. The only problem I'm having is when I customize the scss components. I'm using gulp to compile it and it is recreating the css file fine. However, I would like to get it to ALSO give me the min.css file and the css.map file, but I can't seem to figure it out. I've tried many different iterations on the gulpfile.js but here is my latest.

It only produces the css file.

  var sassFiles = './themes/zurb_foundation/scss/**/*.scss',
    cssDest = './themes/zurb_foundation/css';

  gulp.task('styles', function(){
    gulp.src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(gulp.dest(cssDest))   
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(gulp.dest(cssDest))    
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({ extname: 'min.css' }))
    .pipe(sourcemaps.write('./themes/zurb_foundation/css'))
    .pipe(gulp.dest(cssDest))
 });

  gulp.task('watch', function() {
    livereload.listen();
    gulp.watch(sassFiles, ['styles']);
 })

I've finally gotten it to produce the following error:

CssSyntaxError: /Users/USERNAME/Desktop/SITEFOLDER/ROOTDIR/themes/zurb_foundation/scss/foundation.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the 
postcss-scss parser> 1 | // Foundation by ZURB

I guess at this point, my question would be how should I set-up my gulpfile to tackle the postcss-scss parsing?

Answer 1

So first of all we declare the necessary packages as const as these values shouldn't change their assignation.

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cssmin = require('gulp-cssmin');

Then we write a gulp task called sass, in which we search for all files in the styles folder in an .scss format.

We check and log any errors, we create sourcemaps which allow the browser to map CSS generated by SASS back to the original source file (if you want to use your .scss/.css that way).

We then write your new .css files to the public/styles folder.

gulp.task('sass', function () {
    return gulp.src('./styles/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./public/styles'));
});

After which, we write a second gulp task called minify-css.

We look for all files in the .css format inside our styles folder.

First of all we auto prefix all our css properties. For example, if you have a css class where you have set:

user-select: none;

Autoprefixing will handle adding:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

After which we minify, concatenate and then name our new minified css file as main.min.css and then save it in the public/styles folder.

gulp.task('minify-css', function(){
    gulp.src(['./styles/*.css'])
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(cssmin())
        .pipe(concat('main.css'))
        .pipe(rename("main.min.css"))
        .pipe(gulp.dest('./public/styles'));
});

We then write a task called build, so to call both the sass and minify-css tasks in chronological order by simply running gulp build in the terminal.

gulp.task('build', [‘sass’, ‘minify-css’]);