Gulp and Browserify

Watch User Created Playlist (10)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

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

Installing and Writing a Default Task with Gulp

Precompiling Your LESS Files with Gulp

Bundling Your JavaScript Files with Gulp

Using JSHint for Linting with Gulp

Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support

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

js tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 js

We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

js tutorial about Bundling Your JavaScript Files with Gulp

Bundling Your JavaScript Files with Gulp

3:31 js

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

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.

js tutorial about Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support to Tests using Mocha and Babel

5:02 js

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the --compilers flag for Mocha.

js tutorial about Adding ES6 Support

Adding ES6 Support

8:35 js

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

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