Boilerplate using Gulp, Browserify, and any other tools you may need now or later. Inspired by Dan Tello's post Gulp + Browserify: The Everything Post.
The boilerplate has an initial set of standard tasks and a lot of settings that allow you to expand it. So you can use the boilerplate with various additional tools and plugins - just enable them as soon as you need.
Gulp version: 3.9.1
ECMAScript 5
- Initial set of tools
- File paths
- Commands
- Advanced setup
- Paths
- Tasks
- Service tasks
- Service files
- License
There are tasks for processing js, css and html files and images in the initial set of necessary tasks and tools.
Files are built by the Browserify. Legasy libraries are added via concatenation. Plugins: gulp-bro, gulp-concat.
The boilerplate uses both the stylus preprocessor and poststylus, that is the postcss, adapted for the stylus, in order to avoid re-parsing files and make their processing as fast as possible. Plugins: gulp-stylus, poststylus, postcss plugins.
To process images, the gulp-imagemin is used.
Unprocessed files, such as fonts, are simply copied to the output directory. Later, only the modified files will be recopied.
In the development environment, file changes are tracked and Browser-Sync reloads the browser when changes are made.
Development
- code linting
- source map record
- watching files
- live reloading
Production
- code minification
- babelify
Input: src/
Output: dist/
Put all the files in the input 'src/' directory, and you will find them in the output 'dist/' directory:
| Type | Input | Output |
|---|---|---|
| js | js/index.js and libs/ as directory for legasy libraries (optionally) |
js/index.js and js/libs.js | js/index.min.js and js/libs.min.js |
| css | css/main.styl |
css/main.css | css/main.min.css |
| html | index.html |
index.html |
| images | imgs/ |
imgs/ |
| fonts | fonts/ |
fonts/ |
run in development environment (default task): gulp dev or gulp
simple building without watching and live reloading: gulp build
run in production environment: gulp prod
clear the output directory: gulp clean
display a list of registered tasks: gulp tasks
display common config object: gulp config
To expand or change the boilerplate, use the gulp/config/ directory. It contains two json files: paths-config and gulpfile-config. They prescribe the settings.
paths-config specifies paths to the resources, and gulpfile-config defines other gulp settings, such as postcss plugins or browser-sync options.
Paths options are specified in the config/paths-config.json. Make sure that all folder names always end with a slash.
List the names of folders with unprocessed resources in the "assets" list.
Specify the path to the source map folder in the "maps". If false, source maps will be inline.
Tasks are located in the files in the gulp/tasks/ directory.
If you want to register a new task, create it in a separate js file in this directory. The file should be named the same as the task.
Then add the task name to the "tasks" property in config/gulpfile-config.json. The property stores a list of all the tasks, both enabled and disabled.
You can enable or disable a task directly in gulpfile.js (in the 'build' task or wherever you need).
In addition to the routine work tasks, there are service tasks in the gulp/tasks/ directory, for displaying information about the current settings.
These are:
- 'tasks' - is used to display all the tasks from
config/gulpfile-config.json, and - 'config' - is used to display the common configuration object data.
The rest of the files should not be edited, since they serve to transform data for more convenient work.
gulp/index.js requires all tasks which names are listed in tasks property in the config/gulpfile-config.json.
gulp/config/config.js converts data from json files and merges them into one config object. This object is used then to transfer internal data between files.
This project is available under the MIT license.