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) {
...
}
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
bothgulp-minify
optionsmangle
andcompress
.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-minify
ed file to the source, to see what are the changes...