EzDevInfo.com

UglifyJS: concat and minify or viceversa?

I'm writing an app that uses many JS files. Underscore, Backbone, jQuery, jQuery plugins for sliders, several files for models, routers, collections and views.

In my dev machine, I load every file separately, but in production I use only one JS file (minified, gziped, less http req, etc.).

In my build process, each file in minified with UglifyJS and then concat into prod.js. Is this the correct way to build that file? Or should I concat each file into prod.js and then minify with UglifyJS?

Thanks a lot!

Conditional compilation in CoffeeScript/UglifyJS

Using Coffeescript I need to have a go through a build script anyway to update my .js files, and I have two of them, one for debugging and one for production (one uses Uglify to minimize the files, one does not). So I was thinking that it would be convenient to have some conditional compilation as well, with code that only enters the debug build.

What is the easiest way to achieve this, ideally controlled by a simple command line switch that I can give to either coffee or uglify?

Disable uglyfying in r.js

I am looking for a way to prevent r.js (RequireJS' optimization script) from ugylyfying our JS-modules to maintain readability for debugging purposes. I expect the script (running on Node.js by the way) to have some command line option to be passed. Unfortunately, the documentation if this tool is rather poor.

Using uglifyjs with nodejs in windows

I installed nodejs from nodejs.org on my windows box.

The path to node is C:\Program Files (x86)\nodejs\node.exe

I can run node in command prompt correctly, my question is...I cloned uglifyjs to C:\gitrepos\uglifyjs\

Now I am trying to figure out how to get things setup to just run something like

node uglifyjs -o inputfile.min.js inputfile.js

What has to happen to allow me to do that?

Uglify directory

Rather than adding code and files to the uglify script individually, is there any way to tell uglify to grab an entire dir, and output into 1 script.js file?

grunt - what's the difference between concat and uglify and minify

I feel a bit ignorant for asking this, but what's the difference between concat, uglify, and minify tasks in grunt? I set up an uglify task for all of my site's javascript tasks, and it seemed to both minify and concatenate them. Grunt's site has a great description for how to configure each task, but it doesn't seem to explain what each task actually does.

Javascript minification why is false replaced with !1 and true with !0

I'm writing an app using Enyo2 which comes with a minification tool based on UglifyJS. I've noticed that:

var t = false

is replaced with

var t=!1

The same way true is replaced with !0. I'm sure there is a good explanation for that, I just can't find it. Any idea?

Minify multiple files with UglifyJS

Is it possible to compress multiple files with UglifyJS?

Something like...

uglifyjs -o app.build.js appfile1.js appfile2.js ...

Also, I am running Uglify via NodeJS in Windows Command Prompt

Why is it recommended to use concat then uglify when the latter can do both?

I keep seeing the recommendation for making JS files ready for production to be concat then uglify.

For example here, in on of Yeoman's grunt tasks.

By default the flow is: concat -> uglifyjs.

Considering UglifyJS can do both concatenation and minification, why would you ever need both at the same time?

Thanks.

Angular.module minification bug

Having the darnedest time trying to figure out why minification is not working.

I have injected via an array object my providers prior the function per numerous suggestions across the web and yet still "Unknown provider: aProvider <- a"

Regular:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    $locationProvider.html5Mode(true);
    }])

Minified:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function(a, b){
    a.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    b.html5Mode(true);
    }])

Any suggestion would be much obliged!

How to uglify output with Browserify in Gulp?

I tried to uglify output of Browserify in Gulp, but it doesn't work.

gulpfile.js

var browserify = require('browserify');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');

gulp.task('browserify', function() {
    return browserify('./source/scripts/app.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglify()) // ???
        .pipe(gulp.dest('./build/scripts'));
});

As I understand I cannot make it in steps as below. Do I need to make in one pipe to preserve the sequence?

gulp.task('browserify', function() {
    return browserify('./source/scripts/app.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglify()) // ???
        .pipe(gulp.dest('./source/scripts'));
});

gulp.task('scripts', function() {
    return grunt.src('./source/scripts/budle.js')
        .pipe(uglify())
        .pipe(gulp.dest('./build/scripts'));
});

gulp.task('default', function(){
    gulp.start('browserify', 'scripts');
});

Excluding files/directories from Gulp task

I have a gulp rjs task that concatenates and uglifies all my custom .JS files (any non vendor libraries).

What i am trying to do, is exclude some files/directories from this task (controllers and directives).

Heres my tree:

 - application
    - resources
      - js
        main.js
        - vendor
            - jquery
            - modernzr
            - angular
        - controllers
            - controller1
            - controller2
            - controller3
        - directives
            - directives1
            - directives2
            - directives3
        - widgets
            - widget1
            - widget2
            - widget3
            - widget4
        - modules
            - modules1
            - modules2
            - modules3
            - modules4

Here my gulp.js

dir = {
    app:        'application',
    dest:       'dest',
};

config = {
    src: {
        js: dir.app + '/resources/js'
    },
    dest: {
        js: dir.dest + '/resources/js'
    }
};

gulp.task('rjs', function() {

      rjs({
            baseUrl: config.src.js,
            out: 'main.js',
            name: 'main',
            mainConfigFile: config.src.js + '/main.js',
            exclude: [ 'jquery', 'angular']         
        })
        .pipe(prod ? uglify({ mangle: false, outSourceMap: true, compress: { drop_console: true } }) : gutil.noop())
        .pipe(gulp.dest(config.dest.js))
        .pipe(filesize())
        .pipe(dev ? connect.reload() : gutil.noop());

});

"Unknown provider: aProvider <- a" How do I find the original provider?

When I'm loading the minified (through UglifyJS) version of my AngularJS application, I get the following error in the console:

Unknown provider: aProvider <- a

Now, I realize that this is due to variable name mangling. The unmangled version works just fine. However, I do want to make use of variable name mangling, as it drastically reduces the size of our JS output file.

For that reason, we're using ngmin in our build process, but it doesn't seem to resolve this issue, even though it served us well in the past.

So, to debug this issue, I enabled source maps in our uglify grunt task. They are generated just fine and Chrome does load the maps from the server. Yet, I still get the same unhelpful error message, even though I was under the impression that I should now see the original name of the provider.

How do I get Chrome to use the source maps to tell me which provider is the problem here, or, alternatively, how can I find out the provider in another way?

How to ignore files grunt uglify

Background

I've just started using grunt as of about 30mins ago. So bear with me.

But I have a rather simple script going that will look at my js and then compress it all into one file for me.

Code

"use strict";
module.exports = function (grunt) {

    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                beautify: true,
                report: 'gzip'
            },
            build: {
                src: ['docroot/js/*.js', 'docroot/components/pages/*.js', 'docroot/components/plugins/*.js'],
                dest: 'docroot/js/main.min.js'
            }
        },
        watch: {
            options: {
                dateFormat: function(time) {
                    grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
                    grunt.log.writeln('Waiting for more changes...');
                }
            },
            js: {
                files: '<%= uglify.build.src %>',
                tasks: ['uglify']
            }
        }
    });

    grunt.registerTask('default', 'watch');

}

Question

My main.min.js is getting included in the compile each time. Meaning my min.js is getting 2x, 4x, 8x, 16x etc etc. Is best way around this is to add an exception and ignore main.min.js?

Why does this JavaScript work?

I was looking at the output of some stuff from UglifyJS and happened across some code like the following:

var a = 0;
var b = function () {
    return function () {
        a++;
    }(), 'Hello, World'
}();

After running that code a is 1 and b is the string Hello, World!.

At first glance it appears that b will be undefined since it looks like the result of a function with no return value is being returned, but that is followed by a comma and a string literal.

Why does this work?
And why doesn't UglifyJS just execute the anonymous function and then return Hello, World! as the next statement?