Catching and handling Uglify errors when using Gulp - npm

My Gulp setup is otherwise working fantastically, but it stops if there's an error with my JS files. Until Gulp 4 is finally released, we're all stuck using the less than perfect error system in Gulp... So how can I catch Uglify's errors?
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
According to the Uglify documentation, gulp-uglify emits an 'error' event if it is unable to minify a specific file. Wherever possible, the PluginError object will contain the following properties: fileName, lineNumber, message.
The closest I've gotten it to working is: .on('error', function(uglify) { console.error(uglify.message) })), but it ends up with the above Gulp task ceasing to do any more.
Edit: I realise that there's a number of Gulp extensions that help when dealing with error handling (eg. Gulp-Util, Stream-Combiner2, Gulp-Plumber, etc.) but I don't wish to install a whole new extension just for Uglify (I'm handling my Sass errors just fine without one).

It seems the solution was very simple:
.pipe(uglify(uglifyOptions).on('error', function(uglify) {
console.error(uglify.message);
this.emit('end');
}))
Almost exactly what Jeffwa suggested, but no need for gulp-plumber. The reason my attempt was stopping is because Gulp watch tasks wait until they receive end (see: https://github.com/gulpjs/gulp/issues/259).

Maybe gulp-plumber will help.
var plumber = require('gulp-plumber');
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(plumber(function(error) {
console.error(error.message);
gulp.emit('finish');
}))
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
That should catch any errors emitted and write them to the console.

Related

Run Gulp task before build in VS Code

I have a new empty .NET Core project. Can I automatically run Gulp tasks before a build in VS Code?
I can run the styles task manually by doing VS Code package manager -> Tasks: Run Task -> gulp -> gulp: styles, but when I do build it does not run.
/// <binding beforebuild="styles"></binding>
var gulp = require('gulp');
var gulpless = require('gulp-less');
gulp.task('styles', function () {
var srcfile = 'styles/Styles.less';
var dest = 'wwwroot';
return gulp
.src(srcfile)
.pipe(gulpless())
.pipe(gulp.dest(dest));
});
I got this code from some tutorials online and everything works except the first line.
Is this supposed to work in VS Code or is this only a luxury of Visual Studio?
//In this case we’re adding the a task before other task.
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
// ...
})
//And in this case we’re adding for example the browserSync task.
gulp.task('watch', ['browserSync'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
//We’ll also want to make sure sass runs before watch so the CSS will already be the latest whenever we run a Gulp command.
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
});
Read this document : Gulp for Beginners

mocha programmatically set vue error handler

I find myself writing this at the start of pretty much all of my unit tests in mocha:
it('should do something', (done) => {
Vue.config.errorHandler = done;
// do something aynchronous
});
By default, Vue catches all errors itself and logs them to the console, so mocha can't see them. This code makes sure that thrown errors fail the tests.
Is there a way with mocha to do this without having to start every single async test with this line of code? If I have to write / use a plugin, that's fine.
Try:
Vue.config.errorHandler = function (err, vm, info) {
throw err
}
in your test entry.

Gulp is getting stuck on my task

I'm pretty new to gulp, so I'm stumbling around a bit. I was fine up until the point I wanted to add sourcemaps to my project, now my gulp gets stuck after running the default task and doesn't seem like it will ever start my 'css' task. Since, I'm not getting an error (my gulp task is just stalling) I can't narrow down what's wrong with my file. Here's my gulpfile code and a picture of what's going on in my terminal. I've waited for a good 5 minutes for it to start 'css' and throw an error, but nothing is progressing.
As an edit note, I did change my sass files so that it would trigger the 'css' task to update my styles. I am still having the same issue where it is stuck after it runs the default task and does not start 'css'.
var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function() {
return sass('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('styles.css'))
.on('error', sass.logError)
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});
gulp.task('default', function() {
gulp.watch('scss/**/*.scss',['css']);
});
terminal window

Ember.JS : 'serializer.get is not a function'

So i'm learning EMBER JS from codeschool and i sometime like to save my current progress into my computer. Everything went nice and smoothly until we started to see Array Controller ( and by nice and smoothly i mean everything was working fine, as it does on codeschool ). Since then i got this error :
Error while processing route: index serializer.get is not a function TypeError: serializer.get is not a function
at ember$data$lib$system$store$serializer$response$$normalizeResponseHelper (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:5696:24)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:7450:31
at Object.Backburner.run (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:222:25)
at ember$data$lib$system$store$$Service.extend._adapterRun (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:13030:37)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember-data.js:7449:19
at tryCatch (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54770:14)
at invokeCallback (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54785:15)
at publish (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:54753:9)
at http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:31568:7
at Queue.invoke (http://localhost:63342/Cours/EmberJS/Flint/js/vendors/ember.js:901:16)
So i thought, somehow, my ember.js or ember-data.js was the culprit but nay, it's not ( im up-to-date ). I think the bug is somewhere located in the way i initialize my Route ( eventho i copy/pasted the content of my local files from those on codeschool who works perfectly ) and according to the error message, i think the index route is responsible so here is my router map :
App.Router.map(function() {
this.route('credits', { path: '/thanks' });
this.resource('products', function() {
this.resource('product', { path: '/:product_id' });
});
this.resource('contacts', function() {
this.resource('contact', { path: '/:contact_id' });
});
});
And here's my route ( they're all made like this one, except that i sometime search in 'contact' rather than 'product' )
App.IndexRoute = Ember.Route.extend({
model: function(){
return this.store.findAll('product');
}
});
We also use the fixture adapter so it might come from this too :
App.ApplicationAdapter = DS.FixtureAdapter.extend({});
Does anybody ever got this bug about the serializer ? Thank you'all in advance !
I believe this is due to the removal of the Fixture Adapter in a recent ember-data release. I'm just learning ember myself, but I was finally able to get rid of this error using a combination of reverting to a slightly older ember-data version and installing the replacement Fixture Adapter addon.
In your application dir, update the ember-data line in both bower.json and package.json to:
"ember-data": "1.0.0-beta.19.2",
and in package.json add this line after the ember-data one:
"ember-data-fixture-adapter": "^1.0.0",
Delete the bower_components and node_modules dirs in your application, and then run npm install and bower install from your application's home dir.

gulp-durandal TypeError: req.toUrl is not a function

I try to implement gulp to my durandal project as explain on Durandal gulp doc
main.js file is successfully build, but when trying to click something that will open a modal dialog, it will show this error (firefox):
TypeError: req.toUrl is not a function
url = req.toUrl(nonStripName),
main.js (line 48306, col 16)
here my configuration on gulpfile.js
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('default', function(cb)
{
durandal({
baseDir: 'public_html/app',
main: 'main.js',
output: 'main.js',
almond: true,
minify: false
})
.on('error', function(err) {
console.error('error. ' + err);
})
.pipe(gulp.dest('public_html/build'))
.on('end', cb);
});
I'm also came across with this answer https://stackoverflow.com/a/23329383/1889014
But i'm not sure if this is related to my issue.
Can someone please help or guide me through this ? Thanks!
I also had this issue using gulp, Durandal and modal dialogs. Adding a getView function to the viewmodel that returns the url for the view fixes it.
eg
function getView() {
return "views/theView.html";
}
I am sure there must be a better way of solving this problem but this seems to work in the few places I have needed it.
I have experienced this error due to writing the view name using the wrong case. E.g. if the file is called myView.html but you require 'MyView'.
I am not building using gulp-durandal because it's giving very odd errors, and requirejs is working much better directly. I fixed this error by including all views manually in my requirejs build config.
include: [
'text!customWidgets/alertsSection/title.html', //custom
'text!customWidgets/alertsSection/body.html', //custom
'text!customWidgets/exclusions/body.html', //custom
'text!customWidgets/exclusions/title.html', //custom
'text!customWidgets/submit/body.html', //custom
'text!customWidgets/submit/title.html', //custom
]
There are many more files in my include due to the nature of durandal and the dynamic loading of views... but I don't want to spam everyone :)