Introduction to Gulp.js 1: Intro and Setup
My website is running Jekyll now since the beginning of 2014. But I wasn’t quite happy with my build and development process. I started out with Rake tasks and chose later Grunt.js as my build system, but parts of the process where left in Ruby. I used Compass a lot and Jekyll Assets was handling my versioning. But Grunt.js and the Jekyll Asset Pipeline didn’t play well together. Then a new solution came along: Gulp.js.
This is the first part in a series of 14 articles where I describe my whole development and build process step-by-step from start to finish. I am sick of all these Hello World tutorials spreading around the Internet, describing just the basics and don’t show a whole process, go deeper or share things learned during the process.
It’s the first series of articles I write in English, which is not my native language. So if you find some spelling mistakes or false grammar, just send me a message.
Fortunately I stumbled upon a GitHub project called gulp-starter that helped me a lot to structure my code and understand Gulp.js. So my process is partly derived from this fantastic project.
What is Gulp.js?
Why do I want this at all?
It’s 2014 and we don’t copy our files per drag-and-drop on a server via a FTP program, reload our browser by hitting continuously F5 or crunch our images for a smaller file size by hand. Right? We don’t!
As with Grunt.js, all you need to start is a main file. In Gulp.js this file is called gulpfile.js. The first thing I learned from gulp-starter was to write my project in small parts and don’t use a large monolithic file with everything in it. This way I can easily share my Gulp.js files with other projects or just pass individual tasks around.
So my base gulpfile.js is very short:
All this task is doing is loading all tasks that live in ./gulp/tasks or in any subfolder.
First things first
The first thing to do is installing the required Node module require-dir. To reinstall all my node modules later, I will need to have a file where this information is saved.
You may use the installation helper by typing the command npm init. But I find it faster to create a new file package.json and fill it with these values:
Now I am able to install Node modules and save them to this file for later reinstallation. Go ahead and install require-dir:
$ npm install --save-dev firstname.lastname@example.org
This will install our first Node module and place it into a folder with the name node_modules. So don’t delete this folder or you will have to reinstall all modules again. This can be done later with npm install. The command will install all modules in the package.json file.
My Jekyll website lives in a folder called app. All my tasks will be placed in folder with the name gulp. Go a head and create a folder and within a subfolder with the name tasks. After installing the first module the structure of our project will look like this:
│ ├── _assets
│ ├── _data
│ ├── _drafts
│ ├── _includes
│ ├── _layouts
│ ├── _plugins
│ ├── _posts
│ └── index.html
│ └── tasks
│ └── require-dir
You don’t need a Jekyll website to follow along, but if you want just follow along the installation process of Jekyll that is short and sweet:
$ gem install jekyll
$ jekyll new app
$ cd app
$ jekyll serve
But I actually don’t install Jekyll globally, but with Bundler. This way all my Gems will be installed with my project and I don’t have to be concerned about the correct version.
I install Bundler globally:
$ gem install bundler
Now I create an empty file in my projects folder with the name Gemfile and add these lines:
Now I install the Gems by typing:
$ bundle install
If you installed Jekyll with Bundler run inside of your project directory:
$ bundle exec jekyll new app
Did you install it globally? Then just drop the bundle exec from the command.
This concludes the 1st part of my series Introduction to Gulp.js. We learned what Gulp.js is used for and created the basic folder structure for the project.
This article was first published on stefanimhoff.de