From 3cad7c1e398dfb95d6a07b1dc335bdff3d983dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?s=C3=A9bastien=20poilvert?= <sebastien.poilvert@gmail.com>
Date: Tue, 2 Aug 2016 14:24:45 +0200
Subject: [PATCH] Add 3 tasks for sass in gulpfile.js

I had some issues because of the use of sourcemaps + cssnano together.
I resolved the problem like this :
- The 'scss-for-prod' task to use to create the min.css which is a small file for the prod, but long to compile
- The 'watch-scss' task which is ideal for prod, fast to compile, reload fast and clean sourcemaps

The line :
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))

Is because of this :
https://github.com/scniro/gulp-clean-css/issues/1
and this :
https://github.com/ben-eb/gulp-cssnano/issues/38


So for me, this tasks replace the 'watch-bs'.
---
 gulpfile.js | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/gulpfile.js b/gulpfile.js
index 3388d08..e2ddc8f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -30,9 +30,54 @@ var uglify = require('gulp-uglify');
 var merge2 = require('merge2');
 var ignore = require('gulp-ignore');
 var rimraf = require('gulp-rimraf');
+var clone = require('gulp-clone');
+var merge = require('gulp-merge');
 var sourcemaps = require('gulp-sourcemaps');
 var browserSync = require('browser-sync').create();
 
+
+// Run: 
+// gulp sass + cssnano + rename
+// Prepare the min.css for production (with 2 pipes to be sure that "child-theme.css" == "child-theme.min.css")
+gulp.task('scss-for-prod', function() {
+    var source =  gulp.src('./sass/*.scss')
+        .pipe(plumber())
+        .pipe(sourcemaps.init({loadMaps: true}))
+        .pipe(sass());
+
+    var pipe1 = source.pipe(clone())
+        .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
+        .pipe(gulp.dest('./css'));
+
+    var pipe2 = source.pipe(clone())
+        .pipe(cssnano())
+        .pipe(rename({suffix: '.min'})) 
+        .pipe(gulp.dest('./css'));
+
+    return merge(pipe1, pipe2);
+});
+
+
+// Run: 
+// gulp sourcemaps + sass + reload(browserSync)
+// Prepare the child-theme.css for the developpment environment
+gulp.task('scss-for-dev', function() {
+    gulp.src('./sass/*.scss')
+        .pipe(plumber())
+        .pipe(sourcemaps.init({loadMaps: true}))
+        .pipe(sass())
+        .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
+        .pipe(gulp.dest('./css'))
+        .pipe(reload({stream: true}));
+});
+
+gulp.task('watch-scss', ['browser-sync'], function () {
+    gulp.watch('./sass/**/*.scss', ['scss-for-dev']);
+});
+
+
+
+
 // Run: 
 // gulp sass
 // Compiles SCSS files in CSS