I am attempting to use some gulp plugins ( jscs
, csscomb
) to style my code on the fly during dev time.
I'm having a problem with the gulp process running an infinite loop with the format task.
What's I believe to be happening:
serve
task of some kind myfile.scss
is updated by a developer Here is a snippet that causes this loop. (Note: this uses v4 of gulp)
'use strict'
import { task, parallel, series, src, dest, watch, plugins } from './gulp';
import { startStagingServer } from './servers';
import { solution } from './solution.map';
const path = require('path');
task('serve', parallel(startStagingServer, watchStyles);
function watchStyles() {
watch([ solution.src.styles ], series(formatStyles, compileStyles))
}
function formatStyles(done) {
return src([ solution.src.styles ])
.pipe(plugins.csscomb())
.pipe(dest(solution.src.mount)) // the root of the solution
}
function compileStyles() {
return src([ solution.src.styles ])
.pipe(plugins.sass().on('error', plug.sass.logError))
.pipe(dest(path.join(solution.dest.stage, 'serve')));
}
Does anyone know a way to avoid this?
The way to avoid this is not to put the fix in the watcher. Use 2 separate functions: one that fixes and the other that doesn't. Only watch the one that doesn't. Example:
function taskJscsFix() {
return gulp.src(path.JS)
.pipe(jscs({
configPath: './gulp/.jscsrc',
fix: true
}))
.pipe(gulp.dest(path.SRC.JS));
}
function taskScripts() {
return gulp.src(path.JS)
.pipe(jscs({
configPath: './gulp/.jscsrc'
}))
.pipe(jscs.reporter())
.pipe(gulp.dest(path.DEST.JS));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.