CODEWITHSUNDEEP
angularjsbuildgruntjs
CodyBugstein
CodyBugstein

Reputation: 23322

How to work on angular-app in developer mode?

When I'm creating an Angular app, I like to keep in a messy "Developer mode" so that I can quickly look at my changes without rebuilding or doing some other annoying work to see what changes look like.

In the angular-app project, nothing works unless you do grunt build. That means for every even miniscule change, you have to rebuild the project to see it in action.

Isn't this a stupid way to do things? Is there a better way? Or am I missing some technique I don't know about?

Upvotes: 1

Views: 535

Answers (2)

Estus Flask
Estus Flask

Reputation: 222379

Boilerplates are good for researching what's the best way to organise the app, but there's a high chance that you will end up with your own structure.

I would suggest to try Requirejs if you didn't have a chance before. This Yeoman generator is a fork of nice generator-angular and does very good job on scaffolding (the project's node dependencies need to be updated to build it properly, so watch for this) with Requirejs. Requirejs' module wrappers themselves may need some time to get accustomed to the syntax, but the generator makes the dirty work.

Generated projects are meant to be built with grunt (concatenation, minification, etc) to dist/ folder, but since Requirejs is browser-oriented, the generated app would be fully functional for development in its unbuilt state (just make sure that bower dependencies are linked properly).

I would also suggest LESS instead of other preprocessors, it could be used on client side without compilation.

Gulp is onsiderably faster than Grunt in general, but for quick debugging tasks the building process can still be a PITA.

Upvotes: 1

Ed_
Ed_

Reputation: 19098

Yes, you are missing something.

Grunt is a task manager that has watch functionality to watch the filesystem and run tasks when files change. The angular-app library has implemented this functionality in a grunt task called watch.

To start it, simply run:

grunt watch

from your command line.

If you want to read more about grunt, and similar (e.g. gulp), then read up on build tools. There's plenty of info on Google.

Upvotes: 2

Related Questions