1. Home
  2. Documentation
  3. Gulp

Gulp

Documentation
Components
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 development task from theme's Gulpfile. You're all set. 

$ gulp
Development

Running gulp 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.

The default Gulp task will run following subtasks:

  • set-watch: Helper task
  • html: All .html files are copied from pages to dist. Only newer files are copied during the development later on.
  • 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 for better performance
  • 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. This means, every time you will edit a .html, .scss file or add a new file to e.g. img folder, it will be automatically also compiled/copied into dist folder and the BrowserSync will automatically reload your localhost page(s) in your browser.

Production build

Running gulp build in the theme's folder will clean dist 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.
  • 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.