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:
parent
8ab1558bc6
commit
3cad7c1e39
45
gulpfile.js
45
gulpfile.js
|
@ -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
|
||||||
|
|
Reference in New Issue