---
title: Overview of all gulp tasks included in this package
---

## Composite Tasks

There are two main tasks, combining multiple other tasks. Those tasks are defined in *gulpfile.babel.js* - and those two ones are the ones you are gonna use the most:

### gulp default (or 'npm start')

This is the task you start when developing:

- Start a [Browsersync](http://www.browsersync.io/) server with your configured proxy  
  It's live-reloading, remote-debugging for multiple devices on steroids. By default it starts the proxy on your local IP at port 3000, just have a look at the terminal-output after starting `gulp`. Use this address for developing, copy and paste it in your browser(s) of choice and start on any device on the same network.
- Start watchers for Sass, JavaScript, Images, Fonts and recompile/copy/recreate if something changes
- Activate linting for Sass and JavaScript — if there are any errors you will be notified in the terminal, but the task keeps on running and does not break.

### gulp build (or 'npm run build')

The main task for creating a production-ready version of your sources:

- First: lint HTML for specified pages, lint all JavaScript and Sass. If anything contains errors, the build-task breaks. This way you are obliged to correct your errors before trying to create a production-ready version.
- Generate the SVG-Sprite and the corresponding Sass-file for the sprite
- And at last: create development + production versions for Sass and JavaScript, copy all fonts and losslessly copy and minify images, create a serviceworker-script and the shared config and copy everything to your dest-folder.


## Single Tasks

Every other task (or task-group) can be found in the *./tasks/*-folder. Every file in there will be loaded automatically, this way you can just create a new file in *./tasks/* to add your own tasks for gulp.

Pre-configured tasks are (in alphabetical order):

### clean

This task will remove all temporary files created and every file that will be compiled/copied.

### copy

There are multiple tasks avaiable for copying files around:

- copy:fonts — copies all woff and woff2 files from src to dest
- copy:images — copies all image files from src to dest
- copy:icons — copies all icons into their own folder (for direct usage in HTML)

### javascripts:development and javascripts:production

Those tasks will produce the main.js and main.min.js files, using rollup as a bundler. The non-minified version produced by the javascripts:development-task contains a sourcemap for easy debugging, the one generated by javascripts:production will be minified with uglifyjs.

### lint

There are three different types of tasks avaiable for linting your html, sass and js-files, and for each on of those tasks, there is a :development and a :production-flavor — the development-tasks don't break your build (useful while watching files), whereas the :production-ones will throw an error and kill the build-process:

- lint:javascripts:development — lints all your js files, except those in src/js/vendor, does not break
- lint:javascripts:production — lints all your js files, except those in src/js/vendor, will break build if there are any errors
- lint:stylesheets:development — lints all your scss files, except those in src/scss/vendor, does not break
- lint:stylesheets:production — lints all your scss files, except those in src/scss/vendor, will break build if there are any errors
- lint:html — this task will try to download all pages specified in package.json (kalong.pages), and then lint those for errors
- lint — this task combines the three production-linting tasks just described

### stylesheets:development and stylesheets:production

The task sass:development is used in the default gulp watch task. This task will recompile sass and add a sourcemap for easy debugging. This task creates the unminified, fully expanded *main.css*-file and tells Browsersync to reload, if anything changes.

stylesheets:production creates the minified *main.min.css* file, without any sourcemaps.

Both tasks use the autoprefixer and normalize postcss-plugins to automatically add vendor-prefixes and normalization after sass-compilation.

### savehtml

This task downloads all pages specified in package.json kalong.pages and saves them as temporary files to your public root-folder. This task is used in the lint:html-task (for checking your html).

### serve

Starts a browsersync-instance and is used in the default gulp-task.

### shared

TODO: rewrite
This task creates a shared.json-file from the specified scss-files from config.shared. Only basic sass-maps and variables are supported. This is just a simple regexp-task, converting scss-files (with only variables in it) to one json-file, which then can be used with JS.

### sprites

TODO
This task uses the gulp-plugin [gulp-svg-sprite](https://github.com/jkphl/gulp-svg-sprite) to create a simple sprite from all SVG-files, that you copy to the *./src/img/sprites/*-folder. This tasks generates a sprites.svg-file (the actual sprite) and a scss-file in *./src/scss/vendor/_sprites.scss*. 

The generated sprite is very basic (and at the core just a pimped png-sprite — you still have to create every icon with every color) but can easily be used with the generated mixin. You can change the file *./src/tmpl/sprites.scss* to influence the scss-output.

This is a work in progress, and when we can finally ditch IE9-support, I will revisit this (or use sth. like grumpicon instead...)