Skip to main content

Build tools

Learn how to use Melvin’s included npm scripts to build our theme, compile source code.

Tooling setup

Melvin uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code.

To use our build system and run our documentation locally, you’ll need a copy of Melvin’s source files and Node. Follow these steps and you should be ready to rock:

  1. Download and install Node.js, which we use to manage our dependencies.
  2. Navigate to the root /GULP VERSION directory and run npm install to install our local dependencies listed in package.json. When completed, you’ll be able to run the various commands provided from the command line.
  3. Modify gulp.config.js to your suitable needs (distribtion directory, site name, site url for meta, …).
  4. Run gulp bundle to compile all html files and copy assets in directory.
  5. Run gulp browser-sync to watch your files for modifications and see the result on browser.

Using GULP scripts

Our [gulp.js] includes the following commands and tasks:

Task Description
gulp show--help Show help
gulp asset Copy all asset files to destination directory
gulp html Create all html files with gulp-handlebars-file-include plugins
gulp css Create minified version of application css file
gulp js Create minified version of application js file
gulp img Copy optimize version of your images to destination directory
gulp bundle Copy and create all files to destination directory
gulp watch Watch modification from development directories
gulp browser-sync Watch modification from development directories

Run gulp show--help to see all the gulp tasks.

Online documentation

Learn more about using Melvin by reading its documentation.

Troubleshooting

Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun npm install and gulp bundle.