1

I am developing a web application using the MEAN framework and gulp for minification of the files. However, the application does not work because there are lots of "is not a function, got undefined" when I inspect the navigator console. When I read the app.min.js file which is generated with gulp, I can't find most of javascripts files (controllers, services and so on).

The folder structure that I am using for the client is the following:

client/
├── app.min.js
├── app.min.js.map
├── controllers
│   ├── auth
│   │   ├── login_controller.js
│   │   └── register_controller.js
│   ├── home
│   │   └── home_controller.js
│   ├── navigation
│   │   └── navigation_controller.js
│   └── profile
│       └── profile_controller.js
├── directives
│   └── navigation.js
├── index.html
├── main.js
├── services
│   ├── authentication.js
│   └── data.js
└── views
    ├── auth
    │   ├── login
    │   │   └── login.html
    │   └── register
    │       └── register.html
    ├── home
    │   └── home.html
    ├── navigation
    │   └── navigation.html
    └── profile
        └── profile.html

This the the gulp file which I am using:

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var watch = require("gulp-watch");
var sourcemaps = require("gulp-sourcemaps");
var ngHtml2Js = require("gulp-ng-html2js");

gulp.task("scripts", function() {
  gulp.src([
    "./client/**/*.js",
    "!./client/app.min.js"
  ]).pipe(sourcemaps.init())
      .pipe(concat("./app.min.js"))
      .pipe(uglify({mangle: true}))
      .pipe(gulp.dest("client"))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("client"));
});

gulp.task("watch", function() {
  watch(["./client/**/*.js", "!./client/**/*.test.js", "!./client/app.min.js"], function() {
    gulp.start("scripts");
  });
});

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

Thanks in advance.

EDIT:

This is the generated app.min.js file:

!function(){function t(t,e){t.when("/",{templateUrl:"views/home/home.html",controller:"homeCtrl",controllerAs:"vm"}).when("/register",{templateUrl:"views/register/register.html",controller:"registerCtrl",controllerAs:"vm"}).when("/login",{templateUrl:"views/login/login.html",controller:"loginCtrl",controllerAs:"vm"}).when("/profile",{templateUrl:"views/profile/profile.html",controller:"profileCtrl",controllerAs:"vm"}).otherwise({redirectTo:"/"}),e.html5Mode(!0)}function e(t,e,n){t.$on("$routeChangeStart",function(t,o,r){"/profile"!==e.path()||n.isLoggedIn()||e.path("/")})}angular.module("app",["ngRoute"]),angular.module("app").config(["$routeProvider","$locationProvider",t]).run(["$rootScope","$location","authentication",e])}(),function(){function t(){return{restrict:"EA",templateUrl:"/views/navigation/navigation.html",controller:"navigationCtrl as navvm"}}angular.module("app").directive("navigation",t)}(),function(){function t(t,e){var n=function(t){e.localStorage["token"]=t},o=function(){return e.localStorage["token"]},r=function(){var t,n=o();return n?(t=n.split(".")[1],t=e.atob(t),t=JSON.parse(t),t.exp>Date.now()/1e3):!1},i=function(){if(r()){var t=o(),n=t.split(".")[1];return n=e.atob(n),n=JSON.parse(n),{email:n.email,name:n.name}}},l=function(e){return t.post("/api/register",e).success(function(t){n(t.token)})},a=function(e){return t.post("/api/login",e).success(function(t){n(t.token)})},c=function(){e.localStorage.removeItem("token")};return{currentUser:i,saveToken:n,getToken:o,isLoggedIn:r,register:l,login:a,logout:c}}angular.module("app").service("authentication",t),t.$inject=["$http","$window"]}(),function(){function t(t,e){var n=function(){return t.get("/api/profile",{headers:{Authorization:"Bearer "+e.getToken()}})};return{getProfile:n}}angular.module("app").service("appData",t),t.$inject=["$http","authentication"]}(),function(){function t(t,e){var n=this;n.credentials={name:"",email:"",password:""},n.onSubmit=function(){console.log("Submitting registration"),e.register(n.credentials).error(function(t){alert(t)}).then(function(){t.path("profile")})}}angular.module("app").controller("registerCtrl",t),t.$inject=["$location","authentication"]}(),function(){function t(){console.log("Home controller is running")}angular.module("app").controller("homeCtrl",t)}(),function(){function t(t,e){var n=this;n.user={},e.getProfile().success(function(t){n.user=t}).error(function(t){console.log(t)})}angular.module("app").controller("profileCtrl",t),t.$inject=["$location","appData"]}();
//# sourceMappingURL=app.min.js.map
  • 1
    When you say you get *some* files, which ones do you get? Ditch the uglify call temporarily, if that will help you determine which is which. [This](http://stackoverflow.com/questions/32502678/gulp-uglify-and-sourcemaps) may be helpful to you. I suspect it has something to do with your first `gulp.dest()` call after `uglify`, but I'm not positive. Try removing it and see if it starts working. – dvlsg Apr 22 '16 at 18:57
  • I have tried what you have said but it don't work. I have updated the question with the app.min.js file. As you can see, you can find references to some controllers but does not appear the declaration of it (for example, navigationCtrl). – jesusgonzalezrivera Apr 22 '16 at 19:20
  • Finally I have found the problem. Gulp is not including some of the controllers because I have forgotten to call the function. For example, I use `(function() {...Controller...});` instead of `(function() {...Controller...})();` – jesusgonzalezrivera Apr 23 '16 at 11:38
  • Ah. Yeah, I believe `uglify` will try to eliminate dead code, and I suppose if you aren't using it, then away it goes. – dvlsg Apr 24 '16 at 04:52

0 Answers0