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 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 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…)