Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Use ngmin to make angular code bases minifiable #38

Closed
Munter opened this Issue · 11 comments

3 participants

@Munter
Owner

We can probably determine if we are dealing with an angular app from the ng-app-attribute in any of the initial html-files.

@Munter
Owner

Or we could reimplement it for uglify with this recipe: https://github.com/btford/ngmin/blob/master/signature.js
Just in case we don't want to add an esprima dependency.

@Munter Munter referenced this issue in btford/ngmin
Closed

HTML minification and ng-templates #3

@Munter
Owner

Experimental implementation in Munter@d6a411f

This only covers the syntaxes described in the ngmin README, which means an out of the box yeoman generated AngularJS application doesn't work with a minified build out of the box.

@jameswyse

It's worth noting that ng-app isn't always going to be in the HTML, it's just a quick way to bootstrap, it's also common to see something like the code below instead, without using ng-app at all.

/*global define*/

define(['require', 'libs/angular', 'app'], function(require, angular) {

  'use strict';

  return require(['libs/domReady!'], function(document) {
    return angular.bootstrap(document, ['app']);
  });

});
@Munter
Owner

Oh. I didn't know that. Thank you very much for that input.

I guess that adds some extra work to be done on this ticket.
First suggestion that comes to mind is just query the graph for an asset with the filename of angular.js. I can't see any other ways to detect it from the code example you just gave.

The ng-attributes are a dead giveaway. Looking at the file names in the graph not as much. It's probably best to use both.

@jameswyse

Yeah I'd say that's a good idea. I'm sure it's possible to have angularjs pages with no ng-attributes at all, though it's probably unlikely.

@papandreou
Owner

The risk of screwing up a non-Angular.js JavaScript file is probably pretty low because the transform only touches angular.module(...)... constructs. Should be safe enough to just run it on all JavaScript assets.

@Munter
Owner

I was hoping we could eventually make the preminification work without having to match angular specificly in the script. Especially now that I am aware that angular is requirejs compatible and people might stray from best practices and name their internal angular reference something else than angular

@papandreou
Owner

Is that really important? And how would you detect whether or not a given module is Angular.js? Its file name? What if I strayed from best practices and named it foo.js? :)

@jameswyse

Is this just to ease the syntax in AngularJS? I've never had much trouble minifying my angular scripts, at least with uglify2. I haven't tried the closure compiler.

The syntax is a little clumsy but it's documented and I'd say unless it's bulletproof it would probably be easier to just leave it to angular.

An example controller with this syntax:

/scripts/controllers/helloController.js:

/*global define*/

define(['controllers/controllers'], function(controllers) {

    'use strict';

    return controllers.controller('helloController', ['$scope', function($scope) {
        $scope.hello = 'world';
    }]);

});

controllers comes from elsewhere but it's pretty much angular.module('controllers', []); - Perhaps a little too much abstraction but nice and neat :)

@Munter
Owner

I merged in usage of ngmin in 0816639

Released in assetgraph-builder v1.8.5

@Munter Munter closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.