A set of gulp workflows I commonly use in projects
The preset requires node version at least 7.10.1.
npm install --save-dev gulp-tasks-preset gulp
NOTE: You only need to install the preset files ONCE during fresh setup. Reinstalling after the files are updated would result to them being reverted to the default.
.env file is required for the gulp tasks to be selected according to the environment. This expects an
ENV variable, which can be
The gulpfile will only contain a way to register your desired tasks. Provided are 3 lists of tasks:
By default, task files are placed in the gulp folder. You can move the task files to a different folder. Just update the gulpfile accordingly:
// gulpfile.js // On the last line, pass the folder name as second argument registerTasks(tasks, 'new/tasks/folder');
Uses gulp-sass-lint as SASS linter. A default
.sass-lint.yml file is provided. For details about the config, please refer to this link: https://github.com/sasstools/sass-lint#configuring.
Uses gulp-jshint. A default
.jshintrc file is provided. It's default esversion setting is 6, due to es8(or next) still under the works on JSHint's end.
By default, babel is using the env in order to support the latest ES versions. However, if your current project requires more of the latest ES version, you would have to configure babel to support them (such as installing transform plugins, etc.). This is just a barebones to get you started on a project utilising modules and es2015+.
Uses SASS precompiler.
Combines SVG icons into a single file as SVG symbols. Uses gulp-svg-sprite.
Optimizes image assets. Uses gulp-imagemin.
Simply copies fonts into the public or dist folder.
Simply concatenates vendors scripts and stylesheets.
A config file
vendors.config.js has been provided to manage lists of vendor files.
When running in
watch, any change in the config file triggers the task to run.
This allow you to add and remove vendor files without having to restart gulp over and over.
Default task will automatically run all the registered tasks in your gulpfile.
Watch task will only be registered if you run
The watch task is in its own file, so you have the freedom to customize/override it (e.g., if you want to use proxy for the browserSync, etc.).
It uses gulp-watch plugin to allow new files to be included in the watch, which cannot be done with the native
Every task should be on its own file inside
gulp folder. You may use
_sampleTask.js as a template for your new task. The task's filename will be used as the gulp task's name. So a
copy-files task should be in
The existing tasks are designed to be environment-aware. It is recommended that you design new tasks in such way too.
The preset leverages the use of environment variables accross all tasks and configurations in order to efficiently select stuff that will be used only on a specific environment. Some of these features are:
All the environment variables and other helpers are available when you require the
gulp directory. These are helpful when you build your own tasks.