Getting Started with Gulp – Second Edition

Travis Maynard

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781787285941
• Edition: 2
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Create powerful automations with Gulp to improve the efficiency of your web project workflowAbout This Book• Gain a solid understanding of Gulp and write your own custom tasks from scratch• Discover ways to add additional functionality to improve your tasks• Get up-and-running with new features added to the latest version of GulpWho This Book Is ForThis book is targeted at developers who are new to build systems and task runners but who have had prior experience with web development; a basic knowledge of HTML, CSS, and JavaScript is assumed. It guides the reader through the process of using Gulp to automate several common development tasks so that they can save time and focus on what is most important: writing great code.What You Will Learn• How to use a command-line interface.• Learn about Gulp, Node.js, and npm and how they work together.• Create a Gulpfile from scratch and implement it into a project.• Write basic tasks that will concatenate, minify, compress, and pre-process your files.• Write advanced tasks that will run a local server, sync file changes to your browser, and allow you to write client-side JavaScript using ES2015.In DetailThis book is a hands-on guide to get you up to speed with gulp. You will quickly learn how to install, configure, and run your own build system. It will instill you with the ability to automate several common development tasks to vastly improve your development workflow. This book first demonstrates various Gulp use cases before running through the steps of configuring, running, and customizing Gulp, providing you with core concepts of gulp, node.js, and npm. Diving a bit deeper into the gulp ecosystem, we will discuss when and why to use a node module instead of a gulp plugin. We will also go over a few issues that we can run into while using gulp and learn about ways to work around them to improve your gulp experience.By the end of this book, you will be able to create your very own gulp build from scratch, create and maintain tasks and project builds, and automate your workflow with plugins and custom tasks.Style and approachA step-by-step guide to help you get started with the latest features

Creating Advanced Tasks

Until now, we have only explored basic implementations of Gulp plugins to handle the various tasks that we've built in our gulpfile. In this chapter, you are going to learn how to use plain Node.js modules in our Gulp tasks and explore new ways to create tasks using plugins and node modules together.

Using plain Node.js modules

Using Gulp plugins is the easiest way to add functionality to your workflow. However, the actions that you need to perform inside your tasks are sometimes better off being written using plain Node.js modules and occasionally you will need to use plugins and Node.js modules together.

In this section, we will cover common usage of plain Node.js modules, when and why these modules should be used in place of (or alongside of) Gulp plugins, and some various examples you can use in your own gulpfile to improve your builds.

Why use plain Node.js modules?

A common misunderstanding and topic of confusion for Gulp beginners is when and why to use plain Node.js modules in place of using or creating a new Gulp plugin. Generally, the best practice is that if you can use plain Node.js modules, then you should use plain Node.js modules.

Gulp was built on the Unix philosophy that we can pull together many smaller, single-purpose applications to perform more complex actions. With this philosophy we are never duplicating work or introducing redundant plugins into the community. Additionally, it is easier to test the expectations of each smaller application than it would be to test a large collection of duplicated code.

The Gulp team spends a lot of time ensuring that their plugin ecosystem remains healthy and uncluttered with redundancy. Part of ensuring this is making sure that no Gulp plugin deviates from this core philosophy. Any Gulp plugin that doesn't follow it are added to a community-driven blacklist and will not be displayed to other users in the official Gulp plugin search. This is very important to remember when looking for plugins to use, or if you ever plan on creating a plugin yourself. Don't duplicate work that has already been done. If you would like to help improve a plugin, contact the maintainer and work together to improve it for everyone so we can all keep the plugin ecosystem lean and focused.

If we all decided to create our own version of every plugin, then the ecosystem would be inundated with duplication, which would only confuse users and damage the overall perception of Gulp as a tool.

If you're ever unsure if the plugins you are using have been blacklisted, you can run the gulp --verify command to check if they are included on the official Gulp blacklist.

Static server

For quick and easy distribution, having the ability to spin up a small file server can be a great time saver and will prevent the need to run larger server software such as Apache or Nginx.

For this task, instead of using a Gulp plugin, we are going to use the Connect middleware framework module. Middleware is a small layer that allows us to build additional functionality into our applications, or in this case, our Gulp tasks.

Connect itself only acts as the framework to pull in additional functionality, so in addition to Connect, we will need to install the plugin that we wish to use. To spin up a static server, we will be using the serve-static Node.js module.

Installing modules

Installing plain Node.js modules is exactly the same process as installing Gulp plugins because, despite the Gulp focus, Gulp plugins are still Node.js modules at heart. The modules we will be using for this specific task are connect and serve-static.

To install connect and serve-static, we will run the following command:

 npm install connect serve-static --save-dev 

The following screenshot reflects the command to install the modules that we will use to create our server task:

Including modules

As you might expect, we will include any plain Node.js modules in the same way that we included our Gulp plugins from the previous chapter. We will be adding these two to the bottom of our code as shown in the following code snippet:

 // Load Node Modules/Plugins
 var gulp = require('gulp');
 var concat = require('gulp-concat');
 var myth = require('gulp-myth');
 var uglify = require('gulp-uglify');
 var jshint = require('gulp-jshint');
 var imagemin = require('gulp-imagemin');
 var connect = require('connect'); // Added
 var serve = require('serve-static'); // Added 

The updated gulpfile should look like this:

Writing server task

Once our Node.js modules have been installed and included, we can begin writing our new task. We will introduce some more advanced Node.js-specific syntax, but it will most likely feel somewhat familiar to the tasks we created in the previous chapter.

Our server task will look like this:

 // Server Task
 gulp.task('server', function() {
 return connect().use(serve(__dirname))
 .listen(8080)
 .on('listening', function() {
 console.log('Server Running: View at http://localhost:8080');
 });
 }); 

The following screenshot shows the newly added server task in our gulpfile:

The first thing you will notice is that aside from our main .task() wrapper method, we don't actually use Gulp at all in this task. It's literally a wrapper to label and run the Node.js code that resides within.

Let's take a moment to discuss this code to better understand what it does—we include our connect() function. Next, we will use its .use() method and pass it to our serve() module. In the serve() module, we will pass it to the directory we wish to serve from; in our case __dirname, which is used by Node.js to output the name of the directory that the currently executing script resides in. Next, we assign port 8080 to listen for requests. Finally, we use the .on() method to check whether our server is successfully listening, and then we log a small command to announce that the server is running as expected.

Compared to the Gulp tasks we've created thus far, not a lot has changed. The only difference is that we are using the methods for the plain Node.js module instead of Gulp's built-in methods such as .src() and .dest(). That's because in this case we aren't actually using Gulp to modify any data. We are only using it to label, organize, and control the use of a plain Node.js module within a Gulp task. The server doesn't have any use for modifying our data or using streams; it simply exists as a way to serve the files to a brow...

Table of contents

• Title Page
• Copyright
• Credits
• About the Author
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• Introducing Gulp
• Getting Started
• Understanding the Basics of Gulp
• Performing Tasks with Gulp
• Creating Advanced Tasks
• Tips, Tricks, and Resolving Issues