HomeID
Live Preview

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 homeid/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

  • gulp - this main command will fire default gulp task which includes: moving vendor libraries from node_modules directory to dist folder, javascript minification,compress image, sass and jekyll compilation and lanching watch task. 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.) without folder vendors
  • gulp clean-vendors - clean vendors folder of dist folder
  • gulp clean-all - as the gulp clean but clean all of the dist folder
  • gulp vendors - clean dist/vendors folder then moves vendor libraries from /site/_assets/vendors directory to dist and js/bootstrap directory to dist/vendors/bootstrap folder. Please check this article explaining how to add new vendor plugin to your project - Installing Vendor plugins with npm and Gulp
  • gulp clean-images - clean images folder of the dist folder
  • gulp images - copy images folder from /site/_assets/images to /dist/images
  • gulp js-rebuild - build and then minify and uglify main theme.js file from site/_assets/js folder to dist/js/theme.min.js file which linked to your HTML document.
  • gulp jekyll-build - compiles .html and .md from site folder into HTML in dist folder.
  • gulp css-build - compiles .scss files into non-minified CSS (css/themes.css). From /site/_assets/scss to dist folder.
  • gulp css-min - compiles .css files into minified CSS (css/themes.min.css). From /site/_assets/scss to dist folder.
  • gulp css-rebuild launches series gulp css-build and gulp css-min
  • gulp watch-scss - launches watch-css task. It will watch changes of your .scss files and automatically compile them into .css.
  • gulp watch-scss - launches watch-js task. It will watch changes of your .js files and automatically compile them into .js.
  • gulp watch-images - launches watch-images task. It will watch changes of your images files and automatically copy them into /dist/images.
  • gulp watch - launches watch task. It will watch changes of your .scss / .js / .html / .md files and automatically compile them into .css / .js / .html.
  • gulp rebuild - launches parallel gulp css-rebuild, gulp js-rebuild, gulp images and gulp vendors tasks.
  • gulp serve - provide connect-server functionality
  • gulp imagemin - minify PNG, JPEG, GIF and SVG images
  • gulp w3c - validate HTML using the W3C Markup Validation Service
  • gulp default - launches gulp clean task then launches parallel gulp rebuild, gulp watch, and gulp serve tasks.

Next steps

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

Take some time to familiarize yourself with Project Structure.