Gulp.js Build System #1 - Fundamentals
In part one of this three part series we will look at the fundamental concepts behind creating a
Gulp.js front-end build system.
PLAYLIST:
https://www.youtube.com/watch?v=LmdT2zhFmn4&list;=PLv1YUP7gO_viROuRcGsDCNM-FUVgMYb_G
BLOG POST:
http://joellongie.com/gulp-build-system-fundamentals/
Subscribe and Get More
Great Tips!
http://www.youtube.com/subscription_center?add_user=joellongie
Check me out around the web:
------------------------------------------------------------
Blog: http://joellongie.com
Twitter: https://twitter.com/joellongie
Google+: https://plus.google.com/+joellongie
------------------------------------------------------------
Description
------------------------------------------------------------
If in the past you have ever been intimidated or confused trying to set up a front-end build system you are not alone. A few years ago I had my first introduction to the process watching a video series on YouTube about
Grunt. At the time I diligently followed the videos and within a few hours had my first working Grunt setup, well sort of. It functioned as advertised, but to be honest I had no real understanding of how all the Grunt syntax worked, or how all the parts fit together.
If like me you have been scratching your head trying to make sense of it all then keep reading. This post will help give you an overview and provide a scaffolding to help demystify some of these moving parts as well as looking at a simpler, faster replacement for Grunt.
What Is A
Build System, gulp.js
A build system like gulp is simply a collection of tasks (commonly called “task runners”) that automate repetitive work.
Typical usage would include compiling preprocessed
CSS and JavaScript, concatenation, minification, firing up a server for automatic browser reloading and creating a deployment build. Build systems usually work in tandem with other tools like package managers. While there are literally countless ways to configure your build system lets take a look at three of the most common components in a typical front-end workflow.
1.
Package Managers
Package managers are tools that are used to automate the installation, upgrading, removal, and dependencies for the packages and libraries used in your dev environment. We will be using both
Bower and
NPM (
Node Package Manager) in our upcoming gulp workflow. If it seems redundant to use two package managers instead of just picking one or the other I completely appreciate where you are coming from. It took me quite a bit of research before I started to understand the subtle distinction between the two. While both manage dependencies, their intended target environments are different.
As you can see in the diagram above, Bower manages our gulp front-end dependencies while NPM is used to manage dependencies within the
Node.js environment. If this still seems a little confusing then look at it like this: Bower is used to manage libraries like jQuery,
Backbone, or RequireJS that affect your actual project files. NPM on the other hand handles utility modules that work with node to assist in your build process.
This explanation is of course a gross oversimplification. Both Bower and NPM have many overlapping responsibilities and in some cases
the line might be blurred. Though their might be some grey areas to deal with, in general, understanding the intent of both package managers will help clarify which dependencies go where.
2. Preprocessors
Preprocessors are critical to an efficient modern workflow by adding additional features and an optimized syntax that compiles into its native language. Some of the most popular preprocessors used for CSS, JavaScript and
HTML include:
CSS: Sass,
Less,
Stylus
JavaScript: CoffeeScript, Typescript
HTML:
HAML,
Jade, Markdown,
Slim
While most preprocessors can be used independent of build tools like Gulp or Grunt, pairing your preprocessors with your build tools gains you both efficiency and enhanced functionality. For example, watch tasks are frequently created to watch for file changes and then update the browser. We will look at this much more in detail in part three of this series.
3. Gulp Task
Based Build
Tools
Now lets get to the meat of it, Gulp and Grunt. Both run on Node, both are great tools, and both share a similar anatomy. Although we will be using Gulp in this series, Grunt follows the same overall structure. We will be getting into a few of the core differences between Grunt and Gulp in the next section, but for now lets take a look at the structure of a typical gulp file.
Starting at the top and moving down, the first step is to declare which modules will be required by Gulp. This is where we declare both gulp itself as well as all the dependencies we need for our build.
Finish reading this post at: http://joellongie.com/gulp-build-system-fundamentals/
