Finder Buy now

Working with Gulp

As has been mentioned in previous section, Gulp is a JavaScript task runner. It helps with performing repetitive tasks like minification, compilation, unit testing, linting, etc. This is possible thanks to extensive Gulp Plugins library.

Gulp tasks are already set up for you. They are stored inside Finder/gulpfile.js. But in order to have access to them via you Command Line tool you will need to install gulp-cli node package. Gulp CLI stands for Gulp Command Line Interface. To do that type following line in your terminal:

npm install -g gulp-cli* if you are on Mac make sure to use sudo to install packages globally otherwise you may runt into error.

Gulp CLI commands

  • gulpornpm run build - this main command will fire default gulp task which includes: launching BrowserSync, moving vendor libraries from node_modules directory to dist folder, javascript, sass and pug compilation and lanching watch task. BrowserSync will create dev server and sync your browser with your code editor. Note: to use other separate tasks explained below you will need to open other Terminal window and leave the one with running server intact.
  • gulp clean - as the name implies it cleans dist folder from generated (compiled assests like css, js, vendor libs, etc.)
  • gulp vendor - moves vendor libraries from node_modules directory to dist folder. Please check this article explaining how to add new vendor plugin to your project - Installing Vendor plugins with Npm and Gulp
  • gulp js:expandedandgulp js:minified - compiles ES6 modules from src/js folder, applies polyfill using Babel and then minifies and uglifies main theme.js file and creates 2 files in dist/js folder: theme.js and theme.min.js. The latter is linked to your HTML document. Babel gives you an opportunity to write ES6 javascript and be sure it will be compiled to ES5 js that has a better support across browsers.
  • gulp pug - compiles .pug from src/templates folder into HTML in dist folder.
  • gulp sass:expanded - compiles .scss files into non-minified CSS (css/theme.css). From src to dist folder.
  • gulp sass:minified - compiles .scss files into minified CSS (css/theme.min.css). From src to dist folder.
  • gulp watch - launches watch task. It will watch changes of your .scss / .js / .pug files and automatically compile them into .css / .js / .html.

Next steps

Now you when you are equiped with all necessary tools and dev invironment is all set you are ready to dive into Finder customization.

Take some time to familiarize yourself with Project structure.

Top