CODEWITHSUNDEEP
gulp
user2727195
user2727195

Reputation: 7330

gulp issue during concatenation and uglify in case of javascript typos

Following script runs fine until I make some javascript errors (like misspelled or typos and then save), and then gulp ends up with console errors.

gulp.task("js", function() {
    var app = [
        "!js/api/*.*",
        "js/common/**/*.js",
        "js/modules/**/*.js"
    ];

    gulp.src(app)
        .pipe(concat("app.min.js")) //non-minified for debugging
        .pipe(gulp.dest("js"));

    gulp.src("js/app.min.js")
        .pipe(uglify()) //minify 
        .pipe(gulp.dest("build/js")); //save in build folder
});

the problem happens at uglify level, since app.min.js has problems, so of course uglify will have problem too, but then I've watch going on, I fix the typos that I made and watch runs but breaks up again.

My expectation is that app.min.js (non uglified) gets compiled again with correct code, and then followed by that, uglify should run correctly too but it's not what I'm expecting.

to fix it, I manually go and wipe the non uglified app.min.js and run the gulp again.

Please suggest a solution.

My watch statements.

gulp.task("watch", function() {
    gulp.watch("js/**/*.js", ["js"]);
});

my default task runner

gulp.task("default", ["watch"]);

Upvotes: 2

Views: 113

Answers (1)

Elger van Boxtel
Elger van Boxtel

Reputation: 1060

I encountered the same problem, and fixed it using gulp-plumber.

Install gulp-plumber using following command:

npm install --save-dev gulp-plumber

Then import it in your gulp file:

var plumber = require('gulp-plumber')

and use it in your gulp task. Your task will look like:

gulp.task("js", function() {
var app = [
    "!js/api/*.*",
    "js/common/**/*.js",
    "js/modules/**/*.js"
];

gulp.src(app)
    .pipe(plumber())
    .pipe(concat("app.min.js")) //non-minified for debugging
    .pipe(gulp.dest("js"));
    .pipe(uglify()) //minify 
    .pipe(gulp.dest("build/js")); //save in build folder
});

NOTE that you don't have to do the gulp.src twice; as the gulp stream has already taken care of this for you.

If you're want to use Gulp JS for your application and maybe use Sass css preprocessor, optimise your images, minify CSS and javascript; then maybe you should take a look at the GitHub repository skeletonSPA.

The gulp file in this repository has a lot of tasks that will do all the work for you. It uses AngularJS now, but you can use any javascript library you want.

Hope this will solve your problem ;-)

Upvotes: 0

Related Questions