Hannah, 118/365

Introduction to Gulp.js 11: Production Build, Server and Jekyll

This is the 11th part of my series Introduction to Gulp.js. Today I will start writing the production build task, set up a server to view the production code and build the production site with Jekyll.

In development I used the default Gulp.js tasks to run the development server, building the assets and watching for changes. For production I will need another entry point.

I decided to name my task publish. Later I am able to get a production build with the command gulp publish.

gulp/tasks/publish.js

I put this file on same level as the default.js file. This task is short and sweet: It does only one thing. Start a BrowserSync tasks for production. This way I can have a look on the production site before deploying it to my server.

BrowserSync for Production

All production tasks will live in a folder production/ inside of gulp/tasks/. I name the tasks of development and production the same but put them in different folders.

gulp/config.js

The only differences to the browsersync of development are these: I serve only the production folder and use a different port for the server. This way I can run development and production in parallel.

gulp/tasks/production/browser-sync.js

This task is boring. It just starts the production build.

Build Task for Production

gulp/tasks/production/build.js

A lot is going on in this task: I run tasks in a specific order with run-sequence. First I delete the assets folder for a fresh creation. Then I run the Jekyll build for production, create the development assets like I did in development. And after this is finished I start with optimizing my assets and revisioning of the files.

Jekyll for Production

The Jekyll task is quite similar except for two things: I create my site to the production folder and I add another config file _config.build.yml as an option (be carefull, add no space between two files).

My Jekyll production config just overwrites some values as the url, hide future posts (future: false) or hide drafts (show_drafts: false).

Speed up development with Jekyll

To speed up generation of your site in development, you may set limit_post: 5, which will only generate the last five posts. Additionally I set future: true and show_drafts: true to see Drafts and Posts with a future date.

gulp/config.js
gulp/tasks/production/jekyll.js

Source Code

View Source on GitHub

Conclusion

This concludes the 11th part of my series Introduction to Gulp.js. Today I started to work on the production part of my website, including a server to view the production site, and generate a production build of my Jekyll site.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.