Hey guys, welcome to the first in (hopefully) a series of useful tutorials, for various things that I end up using or learning for either my day job or for fun. In this one we will be going over Gulp, how to get started with it, and some of the basic functionality, with us eventually ending up with a Gulp setup which will compile from Sass and Pug (Originally known as Jade) in to CSS and HTML – all while serving it to your browser automatically. What are Sass and Jade? don’t worry at this second, we will be covering those later on in this tutorial!
Setting Up
So first off, let’s get started with installing what we need. First up, you will need a Node.js installation – I will leave that as an exercise to the reader, as there are so many different ways of setting that up, depending on your particular computer setup.
Once you have Node.js installed, you should also have got the Node Package Manager (npm) installed as well along side it. With this tool, you can now install the gulp software, and supporting packages. Open a new terminal, and create a new folder for this project.
mkdir Gulp-Getting_Started cd Gulp-Getting_Started
And then start a new npm project – follow the instructions it provides, although apart from setting a name and description you can just take the defaults for the rest.
npm init
Now we can start installing Gulp itself! Lets run through the commands.
npm install --global gulp-cli npm install --save-dev gulp
The first command is installing the command line items for your console, so you actually have the ‘gulp’ command to use, and the second command is installing all the other code required into the local modules folder, as well as saving it as a development dependency of your project. This means that when you (or someone else) comes to this project in the future, you will be able to easily find out what you need to install to get this to run.
My First Gulpfile
Now, after all this, we are ready to start using Gulp! So lets start with the basic Gulp file – open a text editor, and create a file called ‘gulpfile.js’ in your project directory. Now, lets start putting some code into it.
First off, we will need the Gulp library imported. So, at the top of your file, put the following line:
var gulp = require('gulp');
Now you have access to all the Gulp functions, so lets start by creating the default task. This is a special task name, which happens if you run gulp without any arguments. Put this after your require lines:
gulp.task('default', function() {
// place code for your default task here
});
And now you have a basic gulpfile! If you run the gulp command from inside the project folder, you should get the following output:
$ gulp [14:55:39] Using gulpfile ~/Projects/Personal/TBS-Tutorials/Gulp-Getting_Started/gulpfile.js [14:55:39] Starting 'default'... [14:55:39] Finished 'default' after 153 μs $
However this is not doing very much, so lets start getting this to do something more useful.
Serve This
For this next step, we will be using Gulp to set up a local server. The first thing we will want to do, is to set up the server. So, let’s get the server module installed:
npm install --save-dev gulp-connect
After that, we can include the module into our gulpfile, so just after the previous the require line, add the following:
var connect = require('gulp-connect');
And now we can add a new task to our gulpfile. We will call this task ‘connect’. So, just add this to your gulpfile, after your default task:
gulp.task('connect', function() {
connect.server();
});
And then you can start the server. This will be serving the code from the root directory of the project, so lets create a file to serve first. Put the following text into a file called ‘index.html’:
<!DOCTYPE html>
<html>
<head>
<title>Hello Gulp</title>
</head>
<body>
<h1>Hello Gulp</h1>
<p>This is only a test</p>
</body>
</html>
With a file in place to serve, you can now start the server! So, lets run the gulp ‘connect’ task.
$ gulp connect [16:16:35] Using gulpfile ~/Projects/TBS-Tutorials/Gulp-Getting_Started/gulpfile.js [16:16:35] Starting 'connect'... [16:16:35] Finished 'connect' after 25 ms [16:16:35] Server started http://localhost:8080
As you can see, this will now be serving the page from localhost:8080. To stop the server (and stop the gulp task) press Ctrl + c (That means, hold Ctrl while you press ‘c’).
Now we can modify the default task to also start the server, by changing the task dependencies. So, change the original default task to look like this:
gulp.task('default', ['connect']);
So, after all this the whole file should look like this:
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('default', ['connect']);
gulp.task('connect', function() {
connect.server();
});
Now, this is reasonably useful for development, as you can modify your html or other files, and then refresh the page. But wouldn’t it be useful if you didn’t have to press refresh every time you changed something?
Part 2 Coming soon, continuing on from here…