4

Hello I have the following gulpfile.js:

'use strict';

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-ruby-sass'),
    compass = require('gulp-compass'),
    gutil = require('gulp-util'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    templateCache = require('gulp-angular-templatecache'),
    path = require('path');

/* Default Gulp Task */
gulp.task('default', ['sass', 'mfb-sass', 'bower-css', 'bower-js', 'app-js', 'ng-templates'], function () {
    return gutil.log('Gulp is running!')
});

/* Build SASS files */
gulp.task('sass', function () {
    return gulp.src('./src/sass/*.scss')
        .pipe(sourcemaps.init())
        .pipe(compass({
            project: path.join(__dirname, '/'),
            css: 'dist/css',
            sass: 'src/sass'
        }))
        .pipe(sourcemaps.write())
        .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('mfb-sass', () =>
    sass('bower_components/ng-material-floating-button/mfb/src/*.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('bower_components/ng-material-floating-button/mfb/dist'))
);


/* Build and Compreess Bower CSS Files */
gulp.task('bower-css', function () {
    return gulp.src([
                        'bower_components/bootstrap/dist/css/bootstrap.min.css',
                        'bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css',
                        'bower_components/bootstrap-material-design/dist/css/ripples.min.css',
                        'bower_components/angular-loading-bar/src/loading-bar.css',
                        'bower_components/snapjs/snap.css',
                        'bower_components/angular-snap/angular-snap.min.css',
                        'bower_components/font-awesome/css/font-awesome.min.css',
                        'bower_components/animate.css/animate.min.css',
                        'bower_components/ngAnimate/css/ng-animation.css',
                        'bower_components/angular-material/angular-material.css',
                        'bower_components/Ionicons/css/ionicons.css',
                        'bower_components/ng-material-floating-button/mfb/dist/mfb.css',
                    ])
        //only uglify if gulp is ran with '--type production'
        .pipe(concat('bower.css'))
        .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
        .pipe(gulp.dest('dist/css'));
});

/* Build and Compreess Bower Javascript Files */
gulp.task('bower-js', function () {
    return gulp.src([
                        'bower_components/jquery/dist/jquery.js',
                        'bower_components/bootstrap/dist/js/bootstrap.js',
                        'bower_components/angular/angular.js',
                        'bower_components/bootstrap-material-design/dist/js/material.js',
                        'bower_components/bootstrap-material-design/dist/js/ripples.min.js',
                        'bower_components/angular-ui-router/release/angular-ui-router.min.js',
                        'bower_components/angular-animate/angular-animate.js',
                        'bower_components/angular-loading-bar/src/loading-bar.js',
                        'bower_components/oclazyload/dist/ocLazyLoad.min.js',
                        'bower_components/satellizer/satellizer.js',
                        'bower_components/snapjs/snap.min.js',
                        'bower_components/angular-snap/angular-snap.min.js',
                        'bower_components/ngSlimscroll/src/js/ngSlimscroll.js',
                        'bower_components/angular-animate/angular-animate.min.js',
                        'bower_components/angular-sanitize/angular-sanitize.js',
                        'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
                        'bower_components/angular-aria/angular-aria.js',
                        'bower_components/angular-material/angular-material.js',
                        'bower_components/ng-material-floating-button/src/mfb-directive.js',
                        'bower_components/humanize-duration/humanize-duration.js',
                        'bower_components/moment/min/moment-with-locales.js',
                        'bower_components/angular-timer/dist/angular-timer.js',
                        'bower_components/angular-fullscreen/src/angular-fullscreen.js',
                        'bower_components/angular-translate/angular-translate.js'
                    ])
        .pipe(sourcemaps.init())
        .pipe(concat('bower.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js'));
});

/* Build and Compress App Javascript Files */
gulp.task('app-js', function () {
    return gulp.src([
                        'src/js/core/app.js',
                        'src/js/core/controllers.js',
                        'src/js/core/services.js',
                        'src/js/core/templates.js',
                        'src/js/core/directives.js',
                        'src/js/core/routes.js',
                        'src/js/**/*.js'
                    ])
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js'));
});


/* Caching all GTML Views */
gulp.task('ng-templates', function () {
    return gulp.src('src/views/**/*.html')
        .pipe(templateCache({
            filename: 'templates.js',
            root: 'tpls/',
            module: 'app.tpls'
        }))
        .pipe(gulp.dest('dist/js'));
});

I am able to build my project with this however I keep getting a weird output, for my bower.js file the total size after build is 12,836 KB. I did not understand this because I noticed my browser seems to use up a lot of memory whenever I run the app, so I decided to calculate the total size of all the files that had been concatenated in my bower.js file and what I had at the end was 3,574 KB.

Right now I am wondering what is going on, are some hidden files being included during the build process, is there a way for me to display an output of all files that were joined together and uglified and the size of each file in gulp?

Is it possible that one of my JS files is loading external scripts? The total size of my bower_components folder is 25.3 MB (29.8 MB on disk).

When I run just "gulp" the file size is 9,225 KB which is smaller, however when I run "gulp --type production" to uglify the scripts the file size increases to 12,836 KB instead.

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
user3718908x100
  • 7,939
  • 15
  • 64
  • 123

1 Answers1

12

You're embedding your source maps in the resulting bower.js. That's what's making the file so large.

If you open the resulting bower.js and look at the very end of the file you should find a line that starts like this

//# sourceMappingURL=data:application/json;base64,

Everything after that specifies the mapping from your source files to the concatenated and uglified bower.js file.

That's the reason why your production build is so much larger than your development build. Your production build uglifies the concatenated files, so there is a lot more to map from your source files to the resulting bower.js file. Your development build on the other hand doesn't have to map very much. The resulting bower.js is just all your source files concatenated into one big file.

Luckily there's another way to include source maps. You can generate them into a separate file by specifying a destination directory in sourcemaps.write():

.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));

This creates a file bower.js.map in the same directory as bower.js. The .map file is also referenced in bower.js:

//# sourceMappingURL=bower.js.map

The browser will only load the bower.js.map file if you are debugging the code in bower.js, so memory usage shouldn't go up unless you're actually debugging.

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
  • Also if you have the time can you please tell me what the recommened / optimal size for a file like this should be? Assuming I'm using a front-end framework like AngularJs. – user3718908x100 Jul 07 '16 at 15:52
  • 1
    Can't really tell you a number of the top of my head, because there really isn't one. It's a matter of opinion and circumstance. Plus what's unacceptable today might very well be acceptable tomorrow. Your best bet isn't to shoot for a specific file size, but to regularly analyze your site's performance with something like [Google's PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/). – Sven Schoenung Jul 07 '16 at 16:01
  • Great answer! Thanks! – codemax Dec 22 '16 at 07:12