CODEWITHSUNDEEP
angularjsbuildgulp
Fernando Fradegrada
Fernando Fradegrada

Reputation: 983

AngularJS + Gulp - Should I concatenate all files in one?

I am giving the final details to my first AngularJS app and I am creating a Gulp config for uglifying my code and set some constants to get a cleaner way to define differents environments.

Now, this is my project folder structure with my components order by folder, so each component has a folder, so it's cleaner to my to develop as I have many components:

src                                     
├── app                                 
│   ├── app.js                          
│   ├── config.js                       
│   └── index.html                      
└── resources                           
│    └── [...3rd party libraries...].min.js
└── components
    ├── admin
    |     ├── users
    |     |     ├── users.list.controller.js
    |     |     └── users.list.view.html 
    |     └── areas
    |           ├── areas.list.controller.js
    |           └── areas.list.view.html
    ├── [...etc...]
    └── [...etc...]

Now as of my config in my index.html I have all these .js imported, for example:

<script src="components/admin/users/users.list.controller.js"></script>
<script src="components/admin/areas/areas.list.controller.js"></script>

The question is, should I concatenate all my components code in only one file? If so, how can I turn all my html js imports into only one (I'm asking for a automatized way, of course :))

If anyone has any thought on my app structure or standars, it's welcome

Thanks!

Upvotes: 0

Views: 236

Answers (1)

Ashish Rajput
Ashish Rajput

Reputation: 1529

We usually decide to beak our bundle/minified file based on size. We use different approach in development and production environment.

Development environment :

  • We use wiredep/gulp-inject to pass js files into index page.
  • We put the watcher on wiredep/gulp-inject task to look into any change in the code. so that new code can be passed into index page automatically
  • We use bower for client side dependencies and automate the process so that as soon as the dependency is installed the reference will go in index page.

Production Environment

  • Bundle/Minify all the 3rd party library as a separate bundle.
  • Bundle/Minify all the project files in separate bundle.
  • Watch the size of these bundles frequently because as the code grows you might need to break the minified files into more files.
  • We use grunt-usemin to serve the minified files

References

Wiredep/gulp-inject

usemin

Upvotes: 1

Related Questions