Can I just have a tutorial that tells me exactly what I need to do and know to set up Gulp, without spiraling into some unrelated discussion about HTML semantics, you wonder? Yes, you can. Here it is.

Pixel comes with SASS and Gulp commands just like in this tutorial and with a couple more powerful features such as project minification and optimization based on advanced Gulp commands. Free download; Live Demo; Pixel Pro Bootstrap UI Kit. Now if you run gulp bundle in your working directory, you'll have your bundle.js sitting in build/, and your bundle.js.map sitting in build/maps/. This config is mostly Gulp-specific detail, so I'll let the comments speak for themselves. The important thing to note is that, in our bundle task, we can easily chain transformations. Gulp is a fantastic build tool for compiling your SCSS, Less and SVG sprites that we use at Liquid Light. For a while now, the gulpJS team have been working on Version 4. This version features some nice additions to the build tool but does also feature some substantial breaking changes. Upgrading is simple, but does require a few tweaks.

Is this article for you?

This article is for you if you're looking for a tutorial that makes no assumptions and will list every step to install Gulp - from the beginning, in order, without any gaps.

This quick start guide will teach you how to build TypeScript with gulp and then add Browserify, uglify, or Watchify to the gulp pipeline. This guide also shows how to add Babel functionality using Babelify. We assume that you’re already using Node.js with npm. Minimal project. Let’s start out with a new directory.

This guide was also made on a Mac. A few steps will vary for Windows.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript

Goals

Install everything necessary to get Gulp up and running.
Compile multiple Sass files into one CSS file, apply vendor prefixes, and minify.

Brief Overview

Gulp.js - the streaming build system is a JavaScript task runner that can automatically take care of redundant tasks for you. Like so many other useful tech tools, Gulp has no 'getting started for beginners' guide to speak of. Their getting started guide, in reality, begins at step 6 or so. If you already know how Node and npm work and have everything installed, it's great - but the beginner is only left more confused and frustrated.

I'm going to quickly summarize a few important concepts. Feel free to scroll back up to this after you've started making some progress for clarification.

Node.js - an environment which enables running server-side JavaScript for the web.
npm - a package manager for Node.js. A tool that allows you to quickly and easily set up local Node environments and plugins.
Local vs. Global - Node.js is installed globally, but Gulp and all of its plugins will be installed locally on a per project basis.
Task Runner - A task runner like Gulp automates all your processes so you don't have to think about them. Gulp requires a package.json and gulpfile.js.

List of Steps

For my part, I will attempt to create the lost beginner's guide to Gulp. I'm listing the steps so you know what you're getting into.

Install Xcode Command Line Tools
Install Homebrew
Install Node.js
Install Gulp globally
Install Node and Gulp locally
Install Gulp plugins
Set up project

Gulp Tutorial

There are plenty of ways to go about this, but this is the way we're going to do it.

Note: Installing XCode and Command Line Tools is no longer necessary in 2016 - Homebrew will install the necessary CLI for you.

Install Xcode Command Line Tools

This is a prerequisite to installing Homebrew.

Install Xcode

Install Command Line Tools

Open Xcode, and click the following.

Install Homebrew

Homebrew makes installing programs and packages insanely easy on a Mac. Open Terminal and type the following, then follow the steps it gives you.

Install Node.js

We'll use Homebrew to install Node.js, which is the server-side JavaScript environment that Gulp runs in. Node.js comes with npm, the Node Package Manager. Type this in Terminal.

Install Gulp Globally

This will install the Gulp command line, globally. It's the last global step before we start installing things locally - on a per project basis.

This is the end of global installation! None of these steps will need to be repeated. From here, we will begin to set up our local project.

Install Node and Gulp Locally

From this point, you'll have to navigate to the folder in which you keep your web projects. For me, that's /Users/tania/sites. Since I start off in Terminal at /Users/tania, I'll move to sites.

Then I'll create a new project directory.

And move to the newly created folder.

In order to install Node locally, you need a package.json file. You can either make that file manually, or generate one. We're going to generate one so you get an idea of how it works.

This command will walk you through creating a generic package.json. It's pretty straightforward, and simply press enter if you're not sure or don't want to fill something in. I just gave it a description, keywords, and author, and the file has been generated.

Now we'll run a command to install Node and Gulp.

You'll get a few warnings about deprecations and missing files, but don't worry too much.

Once that's complete, you can list your files:

node_modules package.json

And you'll see a node_modules directory has been created. For the sake of your own sanity, don't go down the node_modules rabbit hole; you might never find your way out.

Install Gulp Plugins

At this point, in our node_modules directory, the only devDependency we have installed is Gulp. In order to work the magic, we'll need to install all the Gulp plugins. There are a lot of Gulp plugins. For the sake of this article, we're going to install four for our front end web development workflow.

Gulp Sass, to compile SCSS to CSS.
Gulp Sourcemaps, which is a lot more useful than you might imagine.
Gulp cssnano, to minify and optimize outputted CSS
Gulp Autoprefixer, to add vendor prefixers for outputted CSS.

This makes a nice workflow - you can write SCSS without worrying about adding prefixes or manually minifying the code, and sourcemaps will help you find where the CSS originates in your .scss files.

If you have no experience with Sass, I recommend reading Learn Sass Now: A Guide to Installing, Using and Understanding Sass to get a better idea of how it works.

Here is the code to add all four Gulp plugins.

If you check your package.json, you'll notice a new section has been added.

These are all the Node packages you've installed.

For future reference, you can simplify the process by inserting the devDependencies in your package.json initially. After that, simply typing the command npm install will install all the plugins without having to specify it in the command line.

Gulp Js Tutorial

Set Up Project

The last thing we need to do is set up a file named gulpfile.js, which is a JavaScript file that will define the entire task running process.

Create a gulpfile.js. Now we have all the pieces of the Gulp puzzle. Here is a graphical representation of how your project should look so far:

Edit 4/3/2017 - you will see many more directories in the node_modules folder now, due to npm changing the way they handle dependencies, so don't worry, everything still works the same.

We can begin our Gulpfile by defining a variable for each plugin requirement.

I like to work with all my source files, such as Sass, in an src/ directory, and all my destination files in a dist/ directory.

So, I'll begin by creating a Gulp task.

The path /**/*.scss means the task applies to this or any subsequent directory (src/sass/), with any filename that ends in .scss. The destination will be

Gulp Tutorials