Gulp minifying in angular

Question

I'm trying to minify my js in my angular app.

I have a gulpfile.js:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var templates = require('gulp-angular-templatecache');
var minifyHTML = require('gulp-minify-html');

// Minify and templateCache your Angular Templates
// Add a 'templates' module dependency to your app:
// var app = angular.module('appname', [ ... , 'templates']);

gulp.task('templates', function () {
  gulp.src([
      './**/*.html',
      '!./node_modules/**'
    ])
    .pipe(minifyHTML({
      quotes: true
    }))
    .pipe(templates('templates.js'))
    .pipe(gulp.dest('tmp'));
});

// Concat and uglify all your JavaScript

gulp.task('default', ['templates'], function() {
  gulp.src([
      './**/*.js',
      '!./node_modules/**',
      '!./gulpfile.js',
      '!./dist/all.js'
    ])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

When I execute this, i get a all.js file, I replace all of this in index.html:

<!-- JS files integration -->
        <script type="text/javascript" src="js/lib/angular/angular.min.js"></script>

      <script type="text/javascript" src="js/lib/angular-ui-router/release/angular-ui-router.js"></script>
        <script type="text/javascript" src="js/lib/angular-animate/angular-animate.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-aria/angular-aria.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-facebook/lib/angular-facebook.js"></script>
        <script type="text/javascript" src="js/lib/angular-messages/angular-messages.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-sanitize/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/lib/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="js/lib/bootstrap/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/controllers/bootstrap.js"></script>
        <script type="text/javascript" src="js/controllers/AppController.js"></script>
        <script type="text/javascript" src="js/controllers/MainController.js"></script>
        <script type="text/javascript" src="js/controllers/NavController.js"></script>
        <script type="text/javascript" src="js/controllers/UserController.js"></script>

        <script type="text/javascript" src="js/factories/bootstrap.js"></script>
        <script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
    <script type="text/javascript" src="js/factories/EncodedFormInterceptorFactory.js"></script>
    <script type="text/javascript" src="js/factories/TransformRequestInterceptorFactory.js"></script>
        <script type="text/javascript" src="js/factories/AuthFactory.js"></script>
        <script type="text/javascript" src="js/factories/UserFactory.js"></script>
        <script type="text/javascript" src="js/factories/ChallengeFactory.js"></script>

    <script type="text/javascript" src="js/directives/bootstrap.js"></script>
    <script type="text/javascript" src="js/directives/CheckEqualPasswordDirective.js"></script>
    <script type="text/javascript" src="js/directives/ChooseChallengeModalDirective.js"></script>
    <script type="text/javascript" src="js/directives/CompleteChallengeModalDirective.js"></script>
        <script type="text/javascript" src="js/directives/RatingDirective.js"></script>

        <script type="text/javascript" src="js/lib/angular-socialshare/src/js/angular-socialshare.js"></script>
        <script type="text/javascript" src="js/lib/angular-loading-bar/build/loading-bar.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate/angular-translate.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
      <script type="text/javascript" src="js/lib/oclazyload/dist/ocLazyLoad.js"></script>

    <script type="text/javascript" src="js/services/bootstrap.js"></script>
    <script type="text/javascript" src="js/services/ChallengesService.js"></script>
    <script type="text/javascript" src="js/services/CurrentChallengeService.js"></script>
    <script type="text/javascript" src="js/services/RatingService.js"></script>
    <script type="text/javascript" src="js/services/SuggestionsService.js"></script>
    <script type="text/javascript" src="js/services/UserService.js"></script>

     <script type="text/javascript" src="js/app.js"></script>

With this:

<script type="text/javascript" src="js/all.js"></script>

When I try to load my app, I get this error:

all.js:11 Uncaught TypeError: require is not a function

What can I do about this?

I narrowed it down:

var express=require("express"),
app=express(),
mongoose=require("mongoose"),bodyParser=require("body-parser"),
methodOverride=require("method-override"),port=process.env.PORT||8080;

Are all causing problems (maybe more after that). It's in server.js, I'm also using node but only so I can deploy it on heroku (I'm using an external api, so in this app I don't have any models or anything)

Try looking at line 11 of the all.js file & see what's wrong with the require(""); statement. Maybe it's just a small typo. — Nick Snick
– Nick Snick, Commented Dec 10, 2015 at 13:29
There shouldn't be a require in your built code, because it doesn't exist in the browser. Remove the uglify step, and look at all.js to see where the require statement is coming from. — Prashanth Chandra
– Prashanth Chandra, Commented Dec 10, 2015 at 13:42
Why would you try and build server files together with front-end? I think it's because you're importing all **/*.js from node_modules. — Prashanth Chandra
– Prashanth Chandra, Commented Dec 10, 2015 at 13:43
Why are you adding all the contents of node_modules to the build? — Jason
– Jason, Commented Dec 10, 2015 at 13:45

Ajhar Shaikh · Accepted Answer · 2016-12-13 08:21:13Z

1

You need to keep the order of your script files. Concat uses the order, that comes from gulp.src. You just specified /**/*.js, so your filesystem will be responsible for the order, and this is not what you need. There is more explanation on the gulp-concat website

edited Dec 13, 2016 at 8:21

Ajhar Shaikh

1,1242 gold badges15 silver badges34 bronze badges

answered Dec 10, 2015 at 13:49

Guenter Guckelsberger

9408 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gulp minifying in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related