Angular Automation with Gulp

34 minutes

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!

pro-course-rss-logo

PRO RSS Feed

Angular Automation: Introduction to Gulp

Angular Automation: Installing Gulp Globally and Locally

P

Angular Automation: Gulp Tasks

P

Angular Automation: Copy Assets with Gulp

P

Angular Automation: Gulp Inject

P

Angular Automation: Gulp Serve

Angular Automation: Gulp Config

P

Angular Automation: Gulp Watch

P
angularjs tutorial about Angular Automation: Introduction to Gulp

Angular Automation: Introduction to Gulp

4:26 angularjs

Angular projects require automation. Period.

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!

angularjs tutorial about Angular Automation: Installing Gulp Globally and Locally

Angular Automation: Installing Gulp Globally and Locally

4:24 angularjs PRO

In this lesson, we learn how to get up and running with Gulp by initializing our project with
npm
init
and
then installing the Gulp CLI globally and then installing it locally to our project. We finish the lesson off by creating our first Gulp file and running our first Gulp task.

angularjs tutorial about Angular Automation: Gulp Tasks

Angular Automation: Gulp Tasks

3:45 angularjs PRO

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using run-sequence.

angularjs tutorial about Angular Automation: Copy Assets with Gulp

Angular Automation: Copy Assets with Gulp

5:13 angularjs PRO

In this lesson, we are going to learn how to copy assets from one place to another using Gulp. This is important as you start to prepare your source files to be deployed into production. We will learn how to implement gulp.src, gulp.pipe and gulp.dest as well as the del plugin as we copy our files from the source directory into a build directory.

angularjs tutorial about Angular Automation: Gulp Inject

Angular Automation: Gulp Inject

5:10 angularjs PRO

In this lesson, we are going to learn how to use the gulp-inject plugin to sanely and efficiently manage our file references with our HTML. Manually declaring JavaScript references will quickly get out of hand as your application grows in size and complexity. The gulp-inject plugin solves this problem by taking a stream of files, converting them into string references and then injecting those references into your HTML via annotations.

angularjs tutorial about Angular Automation: Gulp Serve

Angular Automation: Gulp Serve

2:49 angularjs

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using gulp-serve. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

angularjs tutorial about Angular Automation: Gulp Config

Angular Automation: Gulp Config

3:35 angularjs PRO

In this lesson, we are going to learn how to create a config file to store common values so that we can reuse them multiple times in our gulpfile.js. As our gulpfile.js grows in complexity, we may find that we are introducing complex and multiple file path references. By creating a gulp.config.js file, we can simplify these references and make it easier to refactor and extend in the future.

angularjs tutorial about Angular Automation: Gulp Watch

Angular Automation: Gulp Watch

5:02 angularjs PRO

In this lesson, we are going to learn how to use gulp.watch to detect local file changes and execute additional Gulp tasks. To illustrate this concept, we are also going to hook up gulp-jshint to automation lint our JavaScript as we make changes to our code.

Presented by:

Lukas Ruebbelke

Lukas Ruebbelke is a technology enthusiast and author of AngularJS in Action for Manning Publications. His favorite thing to do is get people as excited about new technology as he is. He is the co-organizer of the Arizona Software Community user group and host of multiple developer events in the Phoenix metro area.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?