Related
Gulp watch runs only once on the first change. I am running Wordpress on apache2 on ubuntu 14 and am using a tutorial. It illustrates how to use gulp to watch for changes. It works okay for the first change - refreshes the browser which is http://localhost:3000. I'm pretty much new to setting up gulp watch so I am at a loss as to why it only runs once. The gulpfile.js is as follows. If anyone needs anything else to clarify please get back. Thanks
I have done the coding version of turning it off and on again. I have looked through various responses for this type of issue on stackoverflow and other places.
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'],
gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
I expect the browser view and functionality to be updated with every change of code. This only happens once after starting gulp with 'gulp watch'.
A gulp task that will only run once usually indicates that gulp is unable to determine that it has finished the first time and so gulp will not run it again.
Change to this code:
// notice the "done" added below
gulp.task('watch', function(done) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
// I also added a callback function below, just within this one gulp.watch
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'],
gulp.parallel('waitForScripts'));
done();
});
I have also seen it suggested to use this form of watch statement:
gulp.watch('src/pages/**/*.html').on('change',gulp.series(pages, browser.reload));
instead of the commonly used:
gulp.watch('src/pages/**/*.html', gulp.series(pages, browserSync.reload));
So if the callback solution didn't work, try using the suggested form of watch.
Under the rules for stackoverflow, my reputation is too low to tell you that Mark's answer worked for me under the comments to his answer, so I'll add it here. We added gulp to the Udemy course I'm taking and this has been a stumbling block for many users on that site.
Someone else will have to mark it as a correct answer. Probably gulp.js should be modified to take this use case into account, but this is my first time using it. Thanks Mark.
Hello everyone i am in the same situation. I am running Wordpress on mamp pro. the answer from mark work for the html change but i stil get stop for Css en JS
If somebody can helping it wil be great tx.
My gulpfiles is:
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function(done) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
I am sick trying to migrate to gulp 4, i wasted almost 2 days doing it....
I read about new functions API, about series, parallel. I did a clean uninstall of all previous packages and installed gulp 4 locally and gulp-cli globally.
My console shows
[17:17:07] CLI version 2.0.1
[17:17:07] Local version 4.0.0
Here is my gulpfile.js(i also tried describing functions w/o gulp.task but with simple named function declaration and then doing "exports.funcName = funcName")
var gulp = require("gulp"),
browserSync = require("browser-sync"),
cssNano = require("cssnano"),
sass = require("gulp-sass"),
plumber = require("gulp-plumber"),
gutil = require("gulp-util"),
uglifyJs = require("gulp-uglify-es").default,
rename = require("gulp-rename"),
pug = require("gulp-pug"),
concat = require("gulp-concat");
gulp.task('server', gulp.series( (done) => {
browserSync.init({
server: "./",
notify: false
});
done();
}));
gulp.task('pug', gulp.series( () => {
gulp.src('pug/pages/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./'));
}));
gulp.task('sass', gulp.series( () => {
return gulp.src('sass/*.+(sass|scss)')
.pipe(plumber(function(error) {
gutil.log(error.message);
this.emit('end');
}))
.pipe(sass())
.pipe(gulp.dest('css/'))
.pipe(browserSync.reload({stream:true}))
}));
gulp.task('uglify', gulp.series( function() {
return gulp.src(['js/*.js', '!js/*.min.js'])
.pipe(uglifyJs())
.on('error', function (err) {
console.error('Error in js task', err.toString());
})
.pipe(rename(function(path) {
path.basename += ".min"
}))
.pipe(gulp.dest('js/'))
.pipe(browserSync.reload({ stream: true }));
}));
gulp.task('compress', gulp.series('uglify', () => {
return gulp.src(['js/*.min.js', '!js/all.min.js'])
.pipe(concat('all.min.js'))
.pipe(gulp.dest('js/'))
}));
gulp.task('watch', gulp.series('server', function () {
gulp.watch('*.html', browserSync.reload);
gulp.watch('sass/*.+(sass|scss)', ['sass']);
gulp.watch('js/*.js', ['js']);
}));
gulp.task('default', watch);
anyway i always getting errors.....
ReferenceError: watch is not defined
or anykind of
Assertion Error
help pls....
This is truly a magic of stackoverflow. I find solution in 5-15 mins after creating a question :).
Solition for me was in rewriting watch task to this format:
gulp.task('watch', gulp.series('server'));
function watch () {
gulp.watch('*.html', browserSync.reload);
gulp.watch('sass/*.+(sass|scss)', sass);
};
Is it possible to build an css file in dependency to my Theme folder? The problem is i have several themes in there with the same setup gulp should take Theme.scss and build an css file into Theme, Theme1 and so on.
gulp.task('sass', function () {
return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'php'], function () {
gulp.watch('Css/**/*.scss', ['sass']);
})
Edit:
im tryed the solution below the problem i get looks like this :
but i need just the theme.css in theme folder ander theme1.css in theme1 folder and so on! any suggestions ?
gulp.task('sass', function () {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sass({outputStyle: 'compact'}))
// concat into foldername.js
.pipe(concat(folder + '.css'))
// write to output
.pipe(gulp.dest(scriptsPath))
// write to output again
.pipe(gulp.dest(scriptsPath));
});
return merge(tasks);
console.log(folders);
});
You can specify multiple destinations like this:
gulp.task('sass', function () {
return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest('app/css'))
.pipe(gulp.dest('app/Theme'))
.pipe(gulp.dest('app/Theme1'))
.pipe(browserSync.reload({
stream: true
}))
});
Got it thanks guys!
gulp.task('sass', function () {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sass({outputStyle: 'compact'}))
// concat into foldername
.pipe(concat(folder + '.css'))
// write to output
.pipe(gulp.dest(scriptsPath+folder))
});
});
I'm starting to work with gulp. I have electron app that is invoked by a gulp process. The thing is that I wan't to be able to see the console.logs of the main.js process into the console where the gulp command was executed.
I'm able to see the console.logs of all the render processes in the dev tools.
My gulpfile is:
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
concatCss = require('gulp-concat-css'),
run = require('gulp-run');
var src = './process',
app = './app';
gulp.task('js', function () {
return gulp.src(src + '/js/render.js')
.pipe(browserify({
transform: 'reactify',
extensions: 'browserify-css',
debug: true
}))
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest(app + '/js'));
});
gulp.task('html', function () {
gulp.src(src + '/**/*.html');
});
gulp.task('css', function () {
gulp.src(src + '/css/*.css')
.pipe(concatCss('app.css'))
.pipe(gulp.dest(app + '/css'));
});
gulp.task('fonts', function () {
gulp.src('node_modules/bootstrap/dist/fonts/**/*')
.pipe(gulp.dest(app + '/fonts'));
});
gulp.task('watch', ['serve'], function () {
gulp.watch(src + '/js/**/*', ['js']);
gulp.watch(src + '/css/**/*.css', ['css']);
gulp.watch([app + '/**/*.html'], ['html']);
});
gulp.task('serve', ['html', 'js', 'css'], function () {
run('electron app/main.js').exec();
});
gulp.task('default', ['watch', 'fonts', 'serve']);
Any idea of what to do?
The verbosity option for gulp-run could be what you are looking for. It defaults to 2, which means that the output from electron just gets buffered and printed after you quit the app. Setting it to 3 should print your console.logs as soon as they come in.
gulp.task('serve', ['html', 'js', 'css'], function () {
run('electron app/main.js', {verbosity: 3}).exec();
});
I'm running gulp 3.6.2 and have the following task that was set up from a sample online
gulp.task('watch', ['default'], function () {
gulp.watch([
'views/**/*.html',
'public/**/*.js',
'public/**/*.css'
], function (event) {
return gulp.src(event.path)
.pipe(refresh(lrserver));
});
gulp.watch(['./app/**/*.coffee'],['scripts']);
gulp.watch('./app/**/*.scss',['scss']);
});
Any time there's an error in my CoffeeScript gulp watch stops - obviously not what I want.
As recommended elsewhere I tried this
gulp.watch(['./app/**/*.coffee'],['scripts']).on('error', swallowError);
gulp.watch('./app/**/*.scss',['scss']).on('error', swallowError);
function swallowError (error) { error.end(); }
but it doesn't seem to work.
What am I doing wrong?
In response to #Aperçu's answer I modified my swallowError method and tried the following instead:
gulp.task('scripts', function () {
gulp.src('./app/script/*.coffee')
.pipe(coffee({ bare: true }))
.pipe(gulp.dest('./public/js'))
.on('error', swallowError);
});
Restarted, and then created a syntax error in my coffee file. Same issue:
[gulp] Finished 'scripts' after 306 μs
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: W:\bariokart\app\script\trishell.coffee:5:1: error: unexpected *
*
^
at Stream.modifyFile (W:\bariokart\node_modules\gulp-coffee\index.js:37:33)
at Stream.stream.write (W:\bariokart\node_modules\gulp-coffee\node_modules\event-stream\node_modules\through\index.js:26:11)
at Stream.ondata (stream.js:51:26)
at Stream.EventEmitter.emit (events.js:95:17)
at queueData (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:43:21)
at next (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:71:7)
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:85:7
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\lib\src\bufferFile.js:8:5
at fs.js:266:14
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\graceful-fs.js:104:5
at Object.oncomplete (fs.js:107:15)
Your swallowError function should look like this:
function swallowError (error) {
// If you want details of the error in the console
console.log(error.toString())
this.emit('end')
}
I think you have to bind this function on the error event of the task that was falling, not the watch task, because that's not where comes the problem, you should set this error callback on each task that may fail, like plugins that breaks when you have missed a ; or something else, to prevent watch task to stop.
Examples :
gulp.task('all', function () {
gulp.src('./app/script/*.coffee')
.pipe(coffee({ bare: true }))
.on('error', swallowError)
.pipe(gulp.dest('./public/js'))
gulp.src('css/*.scss')
.pipe(sass({ compass: true }))
.on('error', swallowError)
.pipe(cssmin())
.pipe(gulp.dest('dist'))
})
Alternately, if you don't mind to include another module, you can use the log function of gulp-util to keep you from declare an extra function in your gulpfile:
.on('error', gutil.log)
But I may recommend having a look at the awesome gulp-plumber plugin, which is used to remove the onerror handler of the error event, causing the break of the streams. It's very simple to use and it stops you from catch all the tasks that may fail.
gulp.src('./app/script/*.coffee')
.pipe(plumber())
.pipe(coffee({ bare: true }))
.pipe(gulp.dest('./public/js'))
More info about this on this article by the creator of the concerned plugin.
The above examples didn't work for me. The following did though:
var plumber = require('gulp-plumber');
var liveReload = require('gulp-livereload');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var compass = require('gulp-compass');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
var notify = require('gulp-notify');
gulp.task('styles', function () {
//only process main.scss which imports all other required styles - including vendor files.
return gulp.src('./assets/scss/main.scss')
.pipe(plumber(function (error) {
gutil.log(error.message);
this.emit('end');
}))
.pipe(compass({
config_file: './config.rb',
css: './css'
, sass: './assets/scss'
}))
//minify files
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
//output
.pipe(gulp.dest('./css'))
.pipe(notify({message: 'Styles task complete'}));
});
gulp.task('watch', function () {
liveReload.listen();
gulp.watch('assets/scss/**/*.scss', ['styles']);
});
With one format of files
(ex: *.coffee only)
If you want to work only with one format of files, then gulp-plumber is your solution.
For example rich handled errors and warning for coffeescripting:
gulp.task('scripts', function() {
return gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError)
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
With multiple types of file formats
(ex: *.coffee and *.js at same time)
But if you won't to work with multiple types of file formats (for example: *.js and *.coffee), than i will post my solution.
I will just post a self explanatory code over here, with some description before.
gulp.task('scripts', function() {
// plumber don't fetch errors inside gulpif(.., coffee(...)) while in watch process
return gulp.src(['assets/scripts/**/*.js', 'assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(gulpif(/[.]coffee$/, coffeelint()))
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(gulpif(/[.]coffee$/, coffee({ // if some error occurs on this step, plumber won't catch it
bare: true
})))
.on('error', swallowError)
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
I faced the issue with gulp-plumber and gulp-if using gulp.watch(...
See related issue here: https://github.com/floatdrop/gulp-plumber/issues/23
So the best option for me was:
Each part as file, and concatenate after. Create multiple tasks that can process each part in separate file (like grunt does), and concatenate them
Each part as stream, and merge streams after. Merge two streams using merge-stream (that was made from event-stream) into one and continue the job (i tried that first, and it work fine for me, so it is faster solution than previous one)
Each part as stream, and merge streams after
Her is the main part of my code:
gulp.task('scripts', function() {
coffeed = gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError);
jsfiles = gulp.src(['assets/scripts/**/*.js']);
return merge([jsfiles, coffeed])
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
Each part as file, and concatenate after
If to separate this into parts, then in each part there should be a result file created. For ex.:
gulp.task('scripts-coffee', function() {
return gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError)
.pipe(concat('application-coffee.js'))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('scripts-js', function() {
return gulp.src(['assets/scripts/**/*.js'])
.pipe(concat('application-coffee.js'))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('scripts', ['scripts-js', 'scripts-coffee'], function() {
var re = gulp.src([
'dist/scripts/application-js.js', 'dist/scripts/application-coffee.js'
])
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
del(['dist/scripts/application-js.js', 'dist/scripts/application-coffee.js']);
return re;
});
P.S.:
Here node modules and functions that were used:
// Load plugins
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
merge = require('ordered-merge-stream'),
replace = require('gulp-replace'),
del = require('del'),
gulpif = require('gulp-if'),
gulputil = require('gulp-util'),
coffee = require('gulp-coffee'),
coffeelint = require('gulp-coffeelint),
lintThreshold = require('gulp-coffeelint-threshold');
var lintThresholdHandler = function(numberOfWarnings, numberOfErrors) {
var msg;
gulputil.beep();
msg = 'CoffeeLint failure; see above. Warning count: ';
msg += numberOfWarnings;
msg += '. Error count: ' + numberOfErrors + '.';
gulputil.log(msg);
};
var swallowError = function(err) {
gulputil.log(err.toString());
this.emit('end');
};
I like to use gulp plumber because it can add a global listener to a task and have a meaningful message displayed.
var plumber = require('gulp-plumber');
gulp.task('compile-scss', function () {
gulp.src('scss/main.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest('css/'));
});
Reference : https://scotch.io/tutorials/prevent-errors-from-crashing-gulp-watch
A simple solution to this is to put gulp watch in an infinite loop within a Bash (or sh) shell.
while true; do gulp; gulp watch; sleep 1; done
Keep the output of this command in a visible area on your screen as you edit your JavaScript. When your edits result in an error, Gulp will crash, print its stack trace, wait for a second, and resume watching your source files. You can then correct the syntax error, and Gulp will indicate whether or not the edit was a success by either printing out it's normal output, or crashing (then resuming) again.
This will work in a Linux or Mac terminal. If you are using Windows, use Cygwin or Ubuntu Bash (Windows 10).
I have implemented the following hack as a workaround for https://github.com/gulpjs/gulp/issues/71:
// Workaround for https://github.com/gulpjs/gulp/issues/71
var origSrc = gulp.src;
gulp.src = function () {
return fixPipe(origSrc.apply(this, arguments));
};
function fixPipe(stream) {
var origPipe = stream.pipe;
stream.pipe = function (dest) {
arguments[0] = dest.on('error', function (error) {
var state = dest._readableState,
pipesCount = state.pipesCount,
pipes = state.pipes;
if (pipesCount === 1) {
pipes.emit('error', error);
} else if (pipesCount > 1) {
pipes.forEach(function (pipe) {
pipe.emit('error', error);
});
} else if (dest.listeners('error').length === 1) {
throw error;
}
});
return fixPipe(origPipe.apply(this, arguments));
};
return stream;
}
Add it to your gulpfile.js and use it like that:
gulp.src(src)
// ...
.pipe(uglify({compress: {}}))
.pipe(gulp.dest('./dist'))
.on('error', function (error) {
console.error('' + error);
});
This feels like the most natural error handling to me. If there is no error handler at all, it will throw an error. Tested with Node v0.11.13.
Typescript
This is what worked for me. I work with Typescript and separated the function (to aovid confusion with this keyword) to handle less. This works with Javascript as well.
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', function() {
// writing a function to avoid confusion of 'this'
var l = less({});
l.on('error', function(err) {
// *****
// Handle the error as you like
// *****
l.emit('end');
});
return gulp
.src('path/to/.less')
.pipe(l)
.pipe(gulp.dest('path/to/css/output/dir'))
})
Now, when you watch .less files, and an error occurs, the watch will not stop and new changes will processed as per your less task.
NOTE : I tried with l.end();; however, it did not work. However, l.emit('end'); totally works.
Hope this help. Good Luck.
This worked for me ->
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
setTimeout(function(){
return gulp.src('sass/*.sass')
.pipe(sass({indentedSyntax: true}))
.on('error', console.error.bind(console))
.pipe(gulp.dest('sass'));
}, 300);
});
gulp.task('watch', function(){
gulp.watch('sass/*.sass', ['sass']);
});
gulp.task('default', ['sass', 'watch'])
I just added the
.on('error', console.error.bind(console))
line, but I had to run the
gulp
command as root. I'm running node gulp on a php application so I have multiple accounts on one server, which is why I ran into the issue of gulp breaking on syntax errors because I was not running gulp as root... Maybe plumber and some of the other answers here would have worked for me if I ran as root.
Credit to Accio Code https://www.youtube.com/watch?v=iMR7hq4ABOw for the answer. He said that by handling the error it helps you to determine what line the error is on and what it is in the console, but also stops gulp from breaking on syntax error. He said it was kind of a light weight fix, so not sure if it will work for what you are looking for. Quick fix though, worth a shot. Hope this helps someone!