Build Process - v1

  • Available in Vanilla 2.5

This is one of the built-in build processes. It is based on the task runner gulp. It builds stylesheets using node-sass or less and bundles javascript with Webpack and babel.

This build process was formerly called 1.0. It has now been renamed to v1. Existing addon.json files referencing the process version 1.0 will continue to work.

Folder Structure

Source files are always found in one of two places - the src directory or the node_modules directory. Node modules can be installed from npm with yarn.

Stylesheets

This build process works with the Sass preprocessor and the Less preprocessor. Only one preprocessor may be used at a time. A preprocessor is selected either through the addon.json file or as a command line argument

This tool has better support for Sass than Less. Less support exists primarily to facilitate the conversion of older addons.

Sass

Source files should be placed in the src/scss directory. Any file ending in *.scss that does not begin with an underscore _ is considered a source file. Filenames beginning with an underscore such as _partial.scss signify a partial. These do not get built on their own and must use the @import directive to include them. See The Sass language guide for more details.

Less

Source files should be placed in the src/less directory. Any file ending in *.less that does not begin with an underscore _ is considered a source file. Filenames beginning with an underscore such as _partial.less signify a partial. These do not get built on their own and must use the @import directive to include them. See Less - The Import Directive for more details.

Javascript

The javascript entry point is currently always found at src/js/index.js and will generate a bundle at js/custom.js. This tool does not currently support multiple javascript entry files or custom entrypoints/outputs. For custom entrypoints see the core build process.

Images

Image files can be placed in the src/images folder. Each image is its own entry. Images in the src folder will be minified using ImageMin before they are copied to the output directory.

Output

Stylesheets

Each entry stylesheet will be run through their preprocessor and be outputed into the design folder with the filename <entryname>.css. So for an outputted file to be design/myfile.css, its source file would need to be located at src/scss/myfile.scss or src/less/myfile.less. Themes automatically load the css file located at design/custom.css a source file called custom.scss or custom.less is common. All partials will be resolved. See Sass Bundling and Less Bundlingfor more information on how stylesheet bundling works.

Javascript

The single javascript entry will be bundled and outputted to js/custom.js. See The Bundling Process for more information on how the build process works.

Images

Images are outputted with the same filenames and structure as their entries into the design/images folder.

Example Folder Structure

This build process relies on the addon having the following structure for its source files:

addonfoldername
|--src
   |--js
      |--index.js
      |--another-file.js
   |--scss
      |--some-entry-file.scss
      |--_not-an-entry-file.scss
   |--images
      |--image1.png
      |--image2.jpg

Running a build on the given folder structure would would result in the following output files

addonfoldername
|--design
   |--some-entry-file.css
   |--images
      |--image1.png
      |--image2.jpg
|--design
   |--custom.js

Bundling Process

See the Bundling Process page for details about the CLI bundles it’s assets.

Cloud Hosting

We believe that online communities should be intuitive, engaging and true to your brand. Vanilla allows you to create a customized community that rewards positive participation, automatically curates content and lets members drive moderation.

Learn More …