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.
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.
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.
This task is boring. It just starts the production build.
Build Task for Production
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.
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