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'.
This commit is contained in:
sébastien poilvert 2016-08-02 14:24:45 +02:00 committed by GitHub
parent 8ab1558bc6
commit 3cad7c1e39
1 changed files with 45 additions and 0 deletions

View File

@ -30,9 +30,54 @@ var uglify = require('gulp-uglify');
var merge2 = require('merge2'); var merge2 = require('merge2');
var ignore = require('gulp-ignore'); var ignore = require('gulp-ignore');
var rimraf = require('gulp-rimraf'); var rimraf = require('gulp-rimraf');
var clone = require('gulp-clone');
var merge = require('gulp-merge');
var sourcemaps = require('gulp-sourcemaps'); var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create(); 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: // Run:
// gulp sass // gulp sass
// Compiles SCSS files in CSS // Compiles SCSS files in CSS