Gulp

Getting started

To use this theme's dev tools, you will need to have Node and Gulp installed.

1. Install Node

If you don't have Node installed on your machine, head to its official site and choose an appropriate installation for your system.

2. Install gulp globally

This will install Gulp CLI. If you have Gulp CLI already, you can skip this step.

$ npm install --global gulp-cli
3. Install project's dependencies

This will install dependencies from theme's package.json file.

$ npm install
4. Run gulp

This will run a default task from theme's Gulpfile. You're all set. 

$ gulp
Development - using Pug files

Recommended

Running gulp command in the theme's folder will compile the sources to dist then start a local Browsersync instance on port 3000 to serve and refresh your pages as you edit.

I strongly recommend using Pug files for development of your project, as it uses includes and mixins for repetitive code (navbar, footer, cards).

If you change the navbar, the change will be effective in all your pages, unlike when developing with HTML, where you would need to do all the changes in every file.

This Gulp task will run following subtasks:
  • set-watch: Helper task
  • pug: All .pug files are processed from the pug folder to dist folder.
  • browser-sync: Starts a Browsersync on port 3000 served from dist, defaults to index.html.
  • vendor: Copies 3rd party modules to the vendor directory based on our package.json dependencies
  • sass-dev: Compiles style.default.scss into style.default.css - no sourcemaps, no autoprefixing, no minification
  • copy: Copies static assets from folders defined in the copy in the gulpfile.js

After running all these subtasks, there is a watcher set for changes in the pug folder, SCSS and static asset files.

Development - using HTML files

Running gulp dev-html in the theme's folder will compile the sources to dist then start a local Browsersync instance on port 3000 to serve and refresh your pages as you edit.

This Gulp task will run following subtasks:
  • set-watch: Helper task
  • html: All .html files are copied from html folder to dist folder. Only newer files are copied.
  • browser-sync: Starts a Browsersync on port 3000 served from dist, defaults to index.html.
  • vendor: Copies 3rd party modules to the vendor directory based on our package.json dependencies
  • sass-dev: Compiles style.default.scss into style.default.css - no sourcemaps, no autoprefixing, no minification
  • copy: Copies static assets from folders defined in the copy in the gulpfile.js

After running all these subtasks, there is a watcher set for changes in the HTML, SCSS and static asset files.

Production build - Using Pug files

Recommended

Running gulp build in the theme's folder will clean the build folder and then compile the sources into it.

If you were using Pug files during the development, this task will create a build version of your work. The SCSS will be minified, source maps generatad and CSS will also contain vendor prefixes for maximum browser compatibility.

The build Gulp task will run following subtasks:

  • clean: Deletes previous contents from the dist folder
  • pug: All .pug files are processed from the pug folder to build folder.
  • vendor: Copies 3rd party modules to the vendor directory based on our package.json dependencies
  • sass-build: Compiles style.default.scss into style.default.css and style.default.min.css. Vendor prefixing is done by the gulp-autoprefixer based on the setting in .browserslistrc. For the minified version, also the sourcemap file is generated.
  • copy: Copies static assets from folders defined in the copy in the gulpfile.js
Production build - using HTML files

Running gulp build-html in the theme's folder will clean the build folder and then compile the sources into it.

The build Gulp task will run following subtasks:

  • clean: Deletes previous contents from the dist folder
  • html: All .html files are copied from pages to dist. Only newer files are copied.
  • vendor: Copies 3rd party modules to the vendor directory based on our package.json dependencies
  • sass-build: Compiles style.default.scss into style.default.css and style.default.min.css. Vendor prefixing is done by the gulp-autoprefixer based on the setting in package.json (last 2 versions). For the minified version, also the sourcemap file is generated.
  • copy: Copies static assets from folders defined in the copy in the gulpfile.js

After running all these subtasks, there is a watcher set for changes in the HTML, SCSS and static asset files.