This gulp file contains the tasks that we often use for our projects. The idea here is to take away the particular settings of any project in a configuration hash, so that we are able to re-use the same tasks and update the gulp file from project to project, without having to go through all the tasks to adapt each path.
Simply run npm install from the command line, all the needed dependencies will be downloaded.
Every information related to your project should be stored in the config variable, on top of the file.
Once you have completed this variable with all the relevant information, you will be ready to build.
Let's review all the configuration sections and their options.
src- Pattern matching all the JS files that need to be concatenatedbundleFileName- Name of the concatenated (non-minified) JS filedest- Destination folder for the concatenated and minified files
src- Pattern matching all the SCSS files that need to be compiled (using gulp-sass)bundleFileName- Name of the concatenated (non-minified) CSS filedest- Destination folder for the compiled and minified files
src- Pattern matching all images files that need to be optimizeddest- Folder where to store the optimized images
src- A folder containing all SVG images that should united in a single spritedist- Where the sprite file should be storedspriteFile- The name of the sprite file
The other sections are used to configure individual plugins. For information regarding these options, it is best to directly read the documentation of each plugin.
There are three main tasks:
gulp will execute every task and then exit.
gulp watch will monitor all your HTML, SCSS and JS files in order to compile them and refresh your page using BrowserSync.
gulp img will only optimise the images and create the SVG sprite file.
This gulp file is largely inspired by a blog post from our friend @jeromecoupe from Webstoemp.