gulp-csscomb
gulp-csscomb copied to clipboard
koistya
Infinite looping
When I make a change to a SCSS file, both "scss" and "css" tasks run and somehow end up in an infinite loop because the "css" task is watching my SCSS files for changes (Option 1). I've tried a few different approaches to try and solve this, but the only thing that seems to work is not having CSScomb run automatically and instead manually. That's not the desire, but it works.
What might I be doing wrong? I realize the "watch" task might be the issue, but I've removed the "scss" task from "watch" and put it directly on the "css" task (Option 2). I've also duplicated the "watch" and split the tasks (Option 3). It makes sense why it's looping. I just can't figure out a way to prevent it.
Option 1:
/* ============================== */
/* SCSS
/* ============================== */
gulp.task('scss', function() {
return gulp.src([
srcSCSS + '**/*.scss',
'!' + srcSCSS + 'bourbon/**/*',
'!' + srcSCSS + 'neat/**/*'
])
.pipe(csscomb())
.pipe(gulp.dest(srcSCSS));
});
/* ============================== */
/* CSS
/* ============================== */
gulp.task('css', function() {
return gulp.src([
srcSCSS + 'styles.scss'
])
.pipe(plumber({
errorHandler : notify.onError('Error: <%= error.message %>')
}))
.pipe(sass())
.pipe(autoprefixer({
browsers : ['last 2 versions'],
cascade : false
}))
.pipe(cmq())
.pipe(cssmin())
.pipe(header(banner, {
package : package
}))
.pipe(gulp.dest(destCSS))
.pipe(reload({
stream : true
}));
});
/* ============================== */
/* WATCH
/* ============================== */
gulp.task('watch', function() {
gulp.watch(srcCSS + '**/*.scss', ['scss', 'css']);
});
Option 2:
/* ============================== */
/* SCSS
/* ============================== */
gulp.task('scss', function() {
return gulp.src([
srcSCSS + '**/*.scss',
'!' + srcSCSS + 'bourbon/**/*',
'!' + srcSCSS + 'neat/**/*'
])
.pipe(csscomb())
.pipe(gulp.dest(srcSCSS));
});
/* ============================== */
/* CSS
/* ============================== */
gulp.task('css', ['scss'], function() {
return gulp.src([
srcSCSS + 'styles.scss'
])
.pipe(plumber({
errorHandler : notify.onError('Error: <%= error.message %>')
}))
.pipe(sass())
.pipe(autoprefixer({
browsers : ['last 2 versions'],
cascade : false
}))
.pipe(cmq())
.pipe(cssmin())
.pipe(header(banner, {
package : package
}))
.pipe(gulp.dest(destCSS))
.pipe(reload({
stream : true
}));
});
/* ============================== */
/* WATCH
/* ============================== */
gulp.task('watch', function() {
gulp.watch(srcCSS + '**/*.scss', ['css']);
});
Option 3:
/* ============================== */
/* SCSS
/* ============================== */
gulp.task('scss', function() {
return gulp.src([
srcSCSS + '**/*.scss',
'!' + srcSCSS + 'bourbon/**/*',
'!' + srcSCSS + 'neat/**/*'
])
.pipe(csscomb())
.pipe(gulp.dest(srcSCSS));
});
/* ============================== */
/* CSS
/* ============================== */
gulp.task('css', function() {
return gulp.src([
srcSCSS + 'styles.scss'
])
.pipe(plumber({
errorHandler : notify.onError('Error: <%= error.message %>')
}))
.pipe(sass())
.pipe(autoprefixer({
browsers : ['last 2 versions'],
cascade : false
}))
.pipe(cmq())
.pipe(cssmin())
.pipe(header(banner, {
package : package
}))
.pipe(gulp.dest(destCSS))
.pipe(reload({
stream : true
}));
});
/* ============================== */
/* WATCH
/* ============================== */
gulp.task('watch', function() {
gulp.watch(srcCSS + '**/*.scss', ['scss']);
gulp.watch(srcCSS + '**/*.scss', ['css']);
// or
gulp.watch(srcCSS + '**/*.scss', ['css']);
gulp.watch(srcCSS + '**/*.scss', ['scss']);
});
Good luck. I've been waiting and waiting without response for quite some time now. I'm starting to think this plugin isn't supported anymore.
I don't run into the looping as often in gulp 3 but gulp 4 I get the infinite loop. The below code is what I came up with in gulp 3 to fix my looping. You will want to comb as a separate task since if the hashes match it will stop the current pipeline. It may still loop in some cases but shouldn't be infinite.
const crypto = require('crypto');
const through = require('through2');
let hashString = str => {
let hash = crypto.createHash('sha256')
hash.update(str)
return hash.digest('hex')
}
// scss - comb the scss
gulp.task("scss-comb", () => {
let originalHashes = []
return gulp.src([
'src/styles/**/*.scss'
])
.pipe(
through.obj((file, enc, cb) => {
let hash = hashString(file.contents)
originalHashes[file.path] = hash
cb(null, file) // Continue
})
)
.pipe($.csscomb())
.pipe(
through.obj((file, enc, cb) => {
let hash = hashString(file.contents)
if (originalHashes[file.path] === hash) {
cb(false) // Hashes match don't proceed to saving
} else {
cb(null, file) // Hashes don't mach proceed to saving.
}
})
)
.pipe(gulp.dest(pkg.paths.src.scss));
});
I also had the problem of infinite compilation of scss when switching from gulp 3 to gulp 4 with this plugin.
spAnser, your code is not working, the error is below ...
17:56:36] Starting 'scss-comb'...
[17:56:36] 'scss-comb' errored after 11 ms
[17:56:36] ReferenceError: pkg is not defined
at gulp.task (D:\Temp\gulp-4-test\my\gulpfile.js:55:25)
at taskWrapper (D:\Temp\gulp-4-test\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:396:14)
at runBound (domain.js:409:12)
at asyncRunner (D:\Temp\gulp-4-test\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
I changed the paths to the ones I needed, in this form the task does not end at all, it just hangs.
gulp.task("scss-comb", () => {
let originalHashes = []
return gulp.src(path.scssFiles)
.pipe(
through.obj((file, enc, cb) => {
let hash = hashString(file.contents)
originalHashes[file.path] = hash
cb(null, file) // Continue
})
)
.pipe(csscomb())
.pipe(
through.obj((file, enc, cb) => {
let hash = hashString(file.contents)
if (originalHashes[file.path] === hash) {
cb(false) // Hashes match don't proceed to saving
} else {
cb(null, file) // Hashes don't mach proceed to saving.
}
})
)
.pipe(gulp.dest(path.scssFiles));
});