AngularJS with Gulp Step by Step
Step by step guide to making a production ready AngularJS app with Gulp. (Source code:
In this video I’m going to explain how to create a AngularJS app using Angular 1 and I’m going to explain how to do a basic hello world app using Gulp to deploy and test it locally.
It’s a bit more complicated than a hello world app because it’s going to focus on the deployment side of it, which would be suitable for a commercial environment.
For this tutorial we’ll be using Angular, Gulp, Browsersync and NPM (node package manager).
01:30 Install the latest version of node
02:00 Start by opening the terminal and setting up your workspace
02:50 Using the Atom editor
03:27 Initialise NPM repository
04:30 Install required packages for project
05:25 First dependency to install is Angular
06:40 Next install another Angular module called Angular route
07:18 Next install dependencies for local development and deployment of the app (Gulp)
09:10 Install Gulp-concat to merge files
10:17 Final dependency to install is Browsersync
12:15 Create a file structure
16:21 Create a styles.json file (scripts and styles)
18:48 Add our source code
20:57 Next add gulp file
24:54 Create Gulp tasks to automate workflow
32:40 Create a build task to build our project
33:56 Start our browsersync server
34:45 Create a final task to start our development server
36:12 Gulp watch to watch this directory
37:30 Test the deployment
38:20 Create our Angular app starting with the index.html file
41:24 Create a homepage
46:52 Make a controller
50:03 Run Gulp start, go to browser and navigate to url & troubleshoot
54:59 Demonstrate the real-time changes
And that’s it!
We’ve gone through how to build a basic Angular app in a way that you can now build on top of this app. This is a base you can use for future projects or business ideas.
Thanks for watching.
If you like this video check out my tutorials on