Gulp Introduction for Web Designers

At every job, there is a constant no matter how difficult or easy the work may be: time is money. With that being said, developers and designers are always looking for ways to optimize tasks so they can concentrate on stuff that really matters. So, in order to optimize your workflow and how you design and develop websites, gulp can help you to avoid repeating yourself.

What is Gulp?

Gulp is a task runner that helps to organize and run tasks automatically. Some of the tasks that can be performed by Gulp are minification, image compression, adding vendor prefixes, compile templates, convert markdown to HTML, compile CSS Preprocessors like LESS or Sass, etc. Thus, you don’t have to do any of this manually in your development environment. Just let gulp to do this job while you work on making your site look and work as you desire.

Requirements

In order to work, Gulp only requires Node.js and npm. The good thing is that it is not necessary need to know Nodejs in order to work with Gulp. Additionally, Nodejs comes with npm so you don’t have to install them individually. Also, I would suggest a text editor like Atom or Brackets so you can use the pre coloring for your gulp files.

Installation

So, if you don’t have Nodejs, you will need to install it.

First, it is necessary to install Gulp globally, so it is available everywhere in the system. Some Linux based system may require the use of the command sudo to install

$ npm install --global gulp

Second, create a directory called “website,” and it has inside two directories:

• Source: it is the directory where we will actually pre and it will contain the raw files of the website.
• Public: it is a the version of the site after executing the tasks using Gulpjs.

Then, open your project directory and install Gulp locally. Don’t forget to install it as a development dependency.

$ npm install --save-dev gulp

Everything is installed and ready to be configured in the next section.

Configuration

This is not magic. Gulp cannot guess or know what you want to do and what tasks to perform with your project. Thus, it is necessary to create a file that we can configure the tasks. The file name must be gulpfile.js

Now, open gulpfile.js and add the following pre in order to use gulp.

var gulp = require('gulp');

In the next line, create a demo task to know if gulp is configured correctly.

gulp.task('demo', function() {
    console.log('Gulp is working!');
});

Finally, go to the command line or terminal and type gulp demo.
The message should say that” Gulp is working!” Congratulations. You have gulp configured properly in your machine.

Basic Steps

In order to work with Gulp, the following steps are basically used every time you want to create a tasks.

Search the plugin that may solve your problem

Install the plugin

Reference the plugin in the gulpfile.js

Create a task that uses the plugin

Call the task from the terminal/command line

Important Concepts Before the Example

Before jumping into an example with Minification, it is important to know the basic concepts of how gulp works.

• src(): Sets where you have the files that you want to modify with gulp tasks.
• dest(): This is where the files will be stored after been processed by gulp plugins.
• pipe(): send the output of one plugin to another plugin before it is processed by dest. Think of pipes like steps done by gulp from plugin to plugin inside a task.

Put it in to action: Minification

Before you can use minification with gulp, it is necessary to install it. Therefore, for this task, we will use gulp-htmlmin. Moreover, in the source directory, create an index.html file with some HTML pre in it can be used in the example.

Install the plugin from the command line in the root of your project (where you have gulpfile.js). Don’t forget to install it as a development dependency.

sudo npm install gulp-htmlmin --save-dev

In the gulpfile.js and under the declaration of gulp, add a reference for the plugin that you just installed.

var htmlMin = require('gulp-htmlmin');

Next, create a variable called project for an object that will store the source and destinations for our files in the project.

var project  = {
  src : 'source/',  //the folder of our source files
  pbl : 'public/'  //the folder of the files already processed by gulp tasks
};

Lastly, create a task named minify that uses the plugin and generate the minified files.

gulp.task('minify', function(){
  return gulp.src(project.src + '*.html') //It tells gulp where the .html files are stored
    .pipe(htmlMin({collapseWhitespace: true})) //execute the minification
    .pipe(gulp.dest(project.pbl)); // save the minified files into the public folder
});

So, you should have something like this in your gulp file:

var gulp = require('gulp');
var htmlMin = require('gulp-htmlmin');

var project  = {
  src : 'source/',
  pbl : 'public/'
};

//Minify HTML files
gulp.task('minify', function(){
  return gulp.src(project.src + '*.html') //Tells gulp where the .html files are stored
    .pipe(htmlMin({collapseWhitespace: true})) //execute the minification
    .pipe(gulp.dest(project.pbl)); // save the minified files into the public folder
});

Finally, go to the terminal and type gulp minify in order to generate the minified HTML files in the public folder. After you execute the following command, the HTML file (or files) should be minified in the public directory.

gulp minify

Conclusion

Gulp offers a lot of benefits for people that want to improve their workflow. So, I would recommend to at least try it and you won’t regret it. Now, with the same steps taken in the tutorial, try to install another plugin and use it in your project. Good luck and let me know in the comments if you have any questions.