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 its assets.