Step aside Grunt, there's a new task runner in town. Gulp is an intuitive, code-over-configuration, streaming build system.

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: BLOG POST: Subscribe and Get More Great Tips!

Check me out around the web: ----------------------------------------­-------------------- Blog: Twitter: Google+: ----------------------------------------­-------------------- 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. 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. 1001 Electrical Engineering Solved Problems Pdf To Jpg more. 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. Download Kitserver We8 Terbaru more.

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. Eharmony Password Dumper. 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.

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