Gulp & Browserify

Browserify intro, hooking gulp with browserify

Watch User Created Playlist (16)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Introduction to Browserify Part 1

Installing and Writing a Default Task with Gulp

Introduction to Browserify Part 2

P

Gulp and Browserify - Initial Setup

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Babel & Source Maps

P

Using JSHint for Linting with Gulp

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 Watch

P

Angular Automation: Gulp Config

P
node tutorial about Introduction to Browserify Part 1

Introduction to Browserify Part 1

4:36 node

Browserify is a tool that brings node.js style development to the browser.

js tutorial about Installing and Writing a Default Task with Gulp

Installing and Writing a Default Task with Gulp

1:39 js

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

node tutorial about Introduction to Browserify Part 2

Introduction to Browserify Part 2

1:44 node PRO

Browserify allows you to leverage 10s of thousands of javascript modules available in the Node Package Manager (npm) in your browser apps.

js tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

js tutorial about Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 js

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

js tutorial about Gulp and Browserify - Adding Babel & Source Maps

Gulp and Browserify - Adding Babel & Source Maps

4:30 js PRO

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.

js tutorial about Using JSHint for Linting with Gulp

Using JSHint for Linting with Gulp

6:01 js

We will look at linting your JavaScript files using jsHint with Gulp to check for errors and warnings.

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 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.

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.

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