Background and overview
A quick overview why GulpJS was developed and how the domain has developed very quickly during the last years
Short intro to NodeJS
Here we quickly go through Node JS and NPM, so that you can use the platform which GulpJS is based on.
- What is NodeJS
- Usage of the node package manager NPM
- Understanding the package.json file
GulpJS scripts
Here we go through how a GulpJS script is organized, how to create build steps, handle CLI arguments and much more
- Anatomy of a gulpjs script
- Tasks
- Pipes
- Recommended project directory structure
- Source files
- Destination directory
- Dependent tasks
The sample project
Here we go through the example project, which is used for most of the exercises
- Directory structure
- HTML files
- Stylesheets
- Javascript files
- Short intro to Twitter Bootstrap
- Bower dependencies
File tasks
We start with the most basic build steps, like copying, deletion of files and merging of files
- Copying files to a directory
- File globing
- Keeping or changing the folder structure
- Merging files
- Deleting files and directories
Support plugins
There are some plugins that always should be used
- Logging with colors
- Empty pipe steps
- Debug print outs between pipe steps
- How to load all project plugins without effort
- Running tasks in parallel or sequential and how avoid being surprised
Development server
Here we show step-by-step how you configurate a plugin that should start a small local web-server that serves your website. Further how you configurate that every time you save any of your source code files your browser will reload all your files automatically
Production build
A big part of the build process is about to reduce the sizes of the files that should be deployed. Here we go through how you do.
- Minifications of webb pages (HTML)
- Minification of style sheets (CSS)
- Minification of images (PNG, JPG)
- Minification of scripts (JS)