CODEWITHSUNDEEP
node.jsangularjsgruntjsconcatenation
Rajaguru Duraisamy
Rajaguru Duraisamy

Reputation: 21

How to concatenate angularjs files using grunt

I have an angularjs app. I want to concatenate all the angularjs files to single file. I am using grunt and searched about concatenating grunt plugins. I found there are grunt-contrib-concat and grunt-concat-in-order plugins.

But, I am not able to find answers with example on how to concatenate files with dependencies. Please let me know how to specify the dependencies if i use grunt-concat-in-order plugin.

Note: In grunt-concat-in-order documentation it says to specify framework.require("moduleA"). But not sure what framework is. Is there any efficent way to specify the dependency in a single file ?

Thanks in advance, Rajaguru

Upvotes: 2

Views: 4382

Answers (3)

Adi Prasetyo
Adi Prasetyo

Reputation: 1050

you may consider this solution

  1. Separate the module declaration to xxx.module.js

  2. In grunt-contrib-concat modify the config like below :

    place this outside grunt.initConfig

var clientApp = './app/';

grunt-contrib-concat config

dist: {// grab module first, state the second
    src: [
        clientApp+'**/*.module.js',
        clientApp+'**/*.state.js',
        clientApp+'**/*.js'
        ],
    dest: 'dist/<%= pkg.name %>.js'
}

i use state to so i have to define state too before trying to navigate to any state. This is preview my code, the module declaration is declared fist before anything, then my state. even minified doesnt create any problem. my code

I hope this help you. i follow this johnpapa's style guide, your problem might solve there if my solution not work

Upvotes: 1

stevemao
stevemao

Reputation: 1483

According to grunt-contrib-concat, it will concat files in order https://github.com/gruntjs/grunt-contrib-concat#usage-examples

However I suggest you to use grunt-usemin to do the job, which works well with grunt-wiredep (you need to use bower and it solves your dependency issues)

To make this short, I suggest you to checkout generator-angular and generator-angular-fullstack to see what plugins they are using.

To @jsbueno, you are not answering this question. But what you want is ng-annotate.

Upvotes: 1

jsbueno
jsbueno

Reputation: 110156

I don't know about the options you have in grunt - but Angular.js code depends on specific name of parameters for the functions used to declare its controlers, factories and so on.

I.e. when you declare a controler like myModule.controler(function ($scope) {...}) - the $scope there must be the actual variable name - a javascript minifier tool unaware of this will change the variable name to a shorter one, and it will go by unrecognized by angular.

So, unless you can find some specific grunt option to make it avoid changing functions and parameter names (and lilely variables as well), you can't apply it to angular.js projects. Gulpjs has options to just concatenate he javascript files together, without name mangling, thus avoiding this problem.

Upvotes: 0

Related Questions