Gulp minified js throws error

Question

We have lots of separate JavaScript files, and of course they are minified into various others in Production. Currently we use Microsoft Ajax Minifier from command line for this task, but the intention is to switch to gulpjs.

The minification process itself seems to be okay, all the output files are generated, no error is written to output, etc.

But I have a weird issue, ~4-5 out of 16 minified files generated by gulpjs throw various errors, such as:

Cannot read property '...' of undefined

or

Uncaught TypeError: (intermediate value)(intermediate value)(...) is not a function

Ajax minifier is called as follows:

AjaxMin.exe -js -xml .\minify.xml -clobber -evals:safeall

A sample from the minify.xml:

<?xml version="1.0" encoding="utf-8"?>
    <root>
      <output path="..\js\min\main.min.js">
        <input path="..\js\filename1.js"/>
        <input path="..\js\filename2.js"/>
        <input path="..\js\filename3.js"/>
        ...
      </output>
      <output path="..\js\min\report.min.js">
        <input path="..\js\filename4.js"/>
        <input path="..\js\filename5.js"/>
        <input path="..\js\filename6.js"/>
        ...
      </output>
      ...
    </root>

A sample from gulpfile.js

gulp.task("[js]minify-all", function () {
    var mainFiles = [
        "./js/filename1.js",
        "./js/filename2.js",
        "./js/filename3.js",
    ];
    var reportFiles = [
        "./js/filename4.js",
        "./js/filename5.js",
        "./js/filename6.js",
    ];
    ...
    generateMinifiedFile(mainFiles, "./js/min/", "main");
    generateMinifiedFile(reportFiles, "./js/min/", "report");
    ...
}

var generateMinifiedFile = function(inputFiles, outputPath, outputFileName) {
    gulp.src(inputFiles)
        .pipe(concat(outputFileName + ".js"))
        .pipe(minify({
            ext: {
                min: ".min.js"
            },
            noSource: true
        }))
        .pipe(gulp.dest(outputPath));
};

In case it matters, here's package.json

{
  "name": "package",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-bower": "0.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-config": "0.3.0",
    "gulp-less": "3.0.5",
    "gulp-minify": "0.0.12",
    "gulp-minify-css": "1.2.4",
    "gulp-plumber": "1.1.0",
    "gulp-watch": "4.3.5"
  }
}

To sum it up:

Using non-minified js files, the site works fine.
Using minified js files created by AjaxMin.exe, the site works fine.
Using minified js files created by gulpjs, the site breaks.

Anyone has a suggestion what I miss?

UPDATE

Sample of creating a controller:

var settingsModule = angular.module("settingsModule", ["rootModule"]);
settingsModule.controller('settingsCasesController', ["$rootScope", "$scope", "$http", "DataService", function ($rootScope, $scope, $http, dataService) {
    ...
}

@IlyaNovojilov yes, angular files are direct references on the pages, so they're not minified into any of the output files — Peter Szekeli, Jul 14 '16 at 08:11
Do you minify your angular directives? If so http://stackoverflow.com/questions/18782324/angularjs-minify-best-practice — Ilya Novojilov, Jul 14 '16 at 08:14
@IlyaNovojilov yes, they _should_ be safe (I'll have to check it out to give a 100% sure answer), but wouldn't it be an issue using AjaxMin too? — Peter Szekeli, Jul 14 '16 at 08:22
@IlyaNovojilov double checked, angular directives are minification safe — Peter Szekeli, Jul 14 '16 at 08:35
How do you inject your dependencies? Are you using $inject? Can you show example directive? — Krzysztof Atłasik, Jul 14 '16 at 08:46
@yariash I updated the question with a js sample for creating a controller — Peter Szekeli, Jul 14 '16 at 08:55

score 0 · Answer 1 · answered Jul 14 '16 at 09:17

0

Note: This should be a comment, but It is an answer since it's a bit long, and an answer is easyer to write and to read...

To start with, I'd try setting to false both gulp-minify options mangle and compress.

If code runs ok, you should try setting to false only one option, to see which one is responsible of the failure.

If code breaks (this would be quite strange, since I suppose the main task of a minifier is to compress and to mangle...), I'd try to manually compare the output of one gulp-minifyed file to the source, to see what are the changes...

answered Jul 14 '16 at 09:17

MarcoS

17,323
24
96
174

I set `compress` and `mangle` to false, but I still have the same issue – Peter Szekeli Jul 15 '16 at 07:14
I'd try to manually compare the output of one gulp-minifyed file to the source, to see what are the changes, and from those changes, trace back to the root problem. – MarcoS Jul 15 '16 at 07:43
One more question: does your code pass a jslint check? – MarcoS Jul 15 '16 at 07:43
Since many legacy files are involved, I blindly say they don't pass. On the other hand, shouldn't it be an issue for AjaxMin as well? – Peter Szekeli Jul 15 '16 at 07:48
It's possible (well, it's quite sure... :-) the two minifiers sport different levels of strictness, or even different language standards compliance levels... :-( – MarcoS Jul 15 '16 at 08:24

Gulp minified js throws error

1 Answers1