Search code examples
node.jsgulpgulp-concatgulp-uglify

Concat and minify using gulp conflict with node.js file


I have written a script to concat and minify some java-script files in my project. When I run it using both Visual Studio 2015 and Power-shell, it gives me an error message at the end. Please see attached screen shot for the script and the error message.

According to the error message my idea is; The script tries to concat/minify the node.js files too, because the error is related to a node.js file, but that that cannot be happened because I have not included any reference to Node.js in the ‘Layout.cshtml’.

Someone please explain me the mistake I have done.

/// <vs />
// include plug-ins
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var htmlbuild = require('gulp-htmlbuild');
var plugins = require('gulp-load-plugins')();
var es = require('event-stream');
var clean = require('gulp-clean');
var uglify = require('gulp-uglify');
var ignore = require('gulp-ignore');

// pipe a glob stream into this and receive a gulp file stream 
var gulpSrc = function (opts) {
    var paths = es.through();
    var files = es.through();
    paths.pipe(es.writeArray(function (err, srcs) {
        var fixedFiles = [];
        for (var i = 0; i < srcs.length; i++) {
            fixedFiles[i] = srcs[i].replace("~", ".");
            console.log(fixedFiles[i]);
        }
        gulp.src(fixedFiles, opts).pipe(files);
    }));
    return es.duplex(paths, files);
};

var jsBuild = es.pipeline(
    plugins.concat('all.js'),
    gulp.dest('./Scripts/')
);

gulp.task('clean', function () {
    return gulp.src('./Scripts/all.js')
            .pipe(clean({ force: true }));
});

gulp.task('build', function () {
    return gulp.src(['./Views/Home/Layout.cshtml'])
    .pipe(htmlbuild({
        js: htmlbuild.preprocess.js(function (block) {
            block.pipe(gulpSrc())
           .pipe(jsBuild);
        })
    }));
    process.stdout.write('build is done');
});

gulp.task('minify', function () {
    return gulp.src(['./Scripts/all.js']).
    pipe(uglify()).
    pipe(gulp.dest('./testing'));
});
gulp.task('default', ['clean', 'build', 'minify'], function () { });

Error message


Solution

  • This error is being thrown by Uglify within your minify task. It is telling you that the JavaScript code it is operating on could not be parsed correctly. In other words, there is a SyntaxError in the file Scripts/all.js.

    It is unfortunate that Uglify gives such a low-quality error for this. I suggest you take that file and run it through a linter like ESLint. It will do a good job at showing you where exactly the SyntaxError is within the file. This is an important step in your toolchain and should be done as early as possible (on the module level, rather than on built code).