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.
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
What to expect from this Tutorial
This is the first part in a series of 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.
I’ll describe everything step-by-step and provide specific version numbers for modules, to make sure you’ll have no problem in getting it running on your computer. Whenever you have problems feel free to compare your code to the finished GitHub repository. Each tutorial builds on the stuff done before, so if you need some specific thing better look at the final code base. You’ll learn how I created my complete development and build process, which I use on this website and my Ninja & Ninjutsu website. Both websites sources can be found on my GitHub account.
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.
When I started with Gulp.js, I fortunately 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
$ 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
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:
. ├── app │ ├── _assets │ ├── _data │ ├── _drafts │ ├── _includes │ ├── _layouts │ ├── _plugins │ ├── _posts │ └── index.html ├── gulp │ └── tasks ├── gulpfile.js ├── node_modules │ └── require-dir └── package.json
This tutorial uses Jekyll to build the HTML of the website. Creating a new Jekyll website is fast and easy:
$ 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:
source "https://rubygems.org" gem 'jekyll', '~> 2.5.2' gem 'sass', '>= 3.3'
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.