How to Use Yeoman, Brower, Grunt, Angular.js and Node.js
Get Start Yeoman, Grunt and Brower with AngularJS, NodeJS
I really like work with this fast, modern web development after try a simple html template provide by Yeoman. Run the build task with Grunt, search additional library with Brower. All that make the web development very simple and fast. In additional with client side technology AngularJS and backend-side NodeJS.
So this blog I'll show how to get start use these technology to do a simple html template page.
What you need is following.
- Internet connection (get download files)
- Node.js Installed
- Code Editor (I'm using sublime)
- Half an hour your time
- Love Coding
First go to your drive, type following at your Node.js command window.
mkdir {your folder} cd {your folder}
After you create your working folder, type following, so it'll install yo man tools.
npm install -g yo
Now, you're ready for create app using Yeoman. Type following to create a simple web app
npm install -g generator-webapp
yo webapp
While you type the command, command window will ask you to add specific files, like Bootstrap.
After everything setup correctly, following is what you should be able to see.
App folder is the auto generated files include html, javascript and css.
If you just type following, grunt will generate a http server.
grunt server
if you type following, grunt will create production ready files under dist.
grunt
then if you type grunt server:dist, browser will run again with the production ready files.
Following is what you'll see.
Conclusion
I have used ASP.NET MVC bundler system or some other company build bundler system. But I like this way of doing web client side development.It makes you looks cool.(haha) Simple to understand and get start.