CODEWITHSUNDEEP
javascriptangularjsnode.jsgulpminify
stijn.aerts
stijn.aerts

Reputation: 6206

Gulp minifying in angular

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)

Upvotes: 2

Views: 4719

Answers (1)

Guenter Guckelsberger
Guenter Guckelsberger

Reputation: 940

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

Upvotes: 1

Related Questions