The setup
I've followed this tutorial for installing Gulp and configuring a gulpfile.js to concatenate and minify JavaScript files. I am using a Windows7 machine. When I run the gulp command, I get this output:
There are no errors, but gulp.dest() doesn't create the expected "dist/js/MATRIX.min.js".
Here is my gulpfile:
/* based on http://sixrevisions.com/web-performance/improve-website-speed/ */
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concatcss = require('gulp-concat-css');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin'),
svgmin = require('gulp-svgmin');
//gulp.task('default', ['css', 'js', 'img', 'svg', 'html'], function () {});
gulp.task('default', ['js'], function () {});
// CSS concatenation + minification task
gulp.task('css', function() {
return gulp.src('sourcecode/css/*.css')
.pipe(concatcss('semeano.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'));
});
// JS linting + minification + concatenation task
gulp.task('js', function() {
return gulp.src([
'sourcecode/js/agregate/modernizr.custom.08680.min.js',
'sourcecode/js/agregate/jquery.js',
'sourcecode/js/agregate/jquery-ui.js',
'sourcecode/js/agregate/bootstrap.js',
'sourcecode/js/agregate/jquery.dataTables.js',
'sourcecode/js/agregate/dataTables.tableTools.js',
'sourcecode/js/agregate/ZeroClipboard.js',
'sourcecode/js/agregate/DT_bootstrap.js',
'sourcecode/js/agregate/MATRIX_main.js'
])
.pipe(jshint())
.pipe(jshint.reporter("default"))
.pipe(uglify())
.pipe(concat('MATRIX.min.js'))
.pipe(gulp.dest('dist/js'));
});
// Image optimization task
gulp.task('img', function () {
return gulp.src('sourcecode/img/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
// SVG optimization task
gulp.task('svg', function () {
return gulp.src('sourcecode/svg/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('dist/svg'));
});
What I've tried
Figuring "I know how to do things", I did some research and came across this "Gulp suddenly not working anymore after npm update" issue, so I tried this suggestion:
Run: "npm install glob#4.2.2" //no problem
Run: "npm install" //now I get a bunch of errors:
What do I need to do at this point to get this working in my Windows environment?
From looking at the first screenshot and your code snippet, it looks like gulp.src() isn't finding the files you want to process. Check to see if you've got any typos like aggregate?
As for that github issue, it refers to an old version of gulp. Be sure you're using the latest version of gulp 3.9.0.
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 have this code in my gulpfile.js
// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});
gulp.task('default', ['sass'], function() {
gulp.watch('*.scss', ['sass']);
})
This basically watches all scss file.
My theme.scss contains:
#import "default"
#import "buttons"
I want to watch for a specific file i.e default.scss and buttons.scss and if those are modified I want to src in my theme.scss and regenerate theme.css
How do I modify the above code to achieve this?
Any help is appreciated.
If I understand your question, I think this might be a solution
gulp.task('default', function(){
gulp.watch(['default.scss', 'buttons.scss', ..., 'the-files-you-want-to-watch'], ['sass']);
});
If you want to just generate theme.scss when modifying the said files, you could add something like this, and add 'sass_theme' besides 'sass' in the gulp.watch above.
gulp.task('sass_theme', function() {
gulp.src('theme.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});
I'm using gulp uglify, and I'm getting an error.
this is my code:
var uglify = require('gulp-uglify');
var deleteLines = require('gulp-delete-lines');
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./layout3/**/*.js','!./layout3/**/*.min.js'])
.pipe(deleteLines({
'filters': [/<script\s+type=["']text\/javascript["']\s+src=/i, /<script>/i]
}))
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('./layout2'));
});
I add print screen of the error:
I know that there is a problem in jquery.elevatezoom file, I can't find the problem.
thanks.
i got this error after update the 'gulp-uglify', in my case is the pipe was replaced by pump.
because the pump can show error detail, checkt this why use pump
so, maybe you can try this:
var pump = require('pump'); //npm install it first
gulp.task('cssmin', function (cb) {
pump([
gulp.src(['./layout3/**/*.js','!./layout3/**/*.min.js']),
deleteLines({'filters': [/<script\s+type=["']text\/javascript["']\s+src=/i, /<script>/i]}),
uglify().on('error', function(e){
console.log(e);
})
gulp.dest('./layout2')
],
cb
);});
it works on my project now, hope it can help.
I'm trying to utilize Browserify in my Gulp file, but it seems no matter how I set things up, it always throws an error that reads "dest.write is not a function". I originally started with this task using gulp-concat:
gulp.task('scripts', function()
{
return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
.pipe(browserify()
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
When I commented out the browserify() line, everything worked fine. While Googling around for a solution to the error message, I found this page when someone linked to it, saying "the gulp docs rave about this solution" (here):
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');
gulp.task('browserify', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src(['./src/*.js'])
.pipe(browserified)
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
I dug further, and read that vinyl-transform doesn't work with Browserify in this way because there is no write stream, and the preferred method was to use vinyl-source-stream instead. I'm now currently trying to use this proposed solution, but still getting the error:
gulp.task('scripts', function()
{
return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
.pipe(browserify('src/shared/js/*.js', {
debug: true,
extensions: ['.js']
}))
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
Tweaking the browserify() reference in various ways has not changed anything. Can anyone tell me what I'm doing wrong?
Here's the solution that worked for me in exactly same situation.
I spent some time trying to make vinyl-transform work with browserify, without success, so had to revert to vinyl-source-stream and vinyl-buffer combination.
I used the following gist as a base reference for my code snippet:
https://gist.github.com/stoikerty/cfa49330a9609f6f8d2d
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
gulp.task('browserify', function () {
var b = browserify({
entries: './js/test.js', // Only need initial file, browserify finds the deps
debug: true // Enable sourcemaps
});
return b.bundle()
.pipe(source('./js/test.js')) // destination file for browserify, relative to gulp.dest
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
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!