Vanilla CLI Build Structure (Deprecated) - HL Vanilla Community
<main> <article class="userContent"> <p>This is one of the built-in build processes. It is based on the task runner <a href="http://gulpjs.com/" rel="nofollow noreferrer ugc">gulp</a>. It builds stylesheets using <a href="https://github.com/sass/node-sass" rel="nofollow noreferrer ugc">node-sass</a> or <a href="https://github.com/less/less.js/tree/master" rel="nofollow noreferrer ugc">less</a> and bundles javascript with <a href="https://github.com/webpack/webpack" rel="nofollow noreferrer ugc">Webpack</a> and <a href="https://babeljs.io/" rel="nofollow noreferrer ugc">babel</a>.</p><p>This build process was formerly called <code class="code codeInline" spellcheck="false" tabindex="0">1.0</code>. It has now been renamed to <code class="code codeInline" spellcheck="false" tabindex="0">v1</code>. Existing addon.json files referencing the process version <code class="code codeInline" spellcheck="false" tabindex="0">1.0</code> will continue to work.</p><h2 data-id="folder-structure">Folder Structure</h2><p>Source files are always found in one of two places - the <code class="code codeInline" spellcheck="false" tabindex="0">src</code> directory or the <code class="code codeInline" spellcheck="false" tabindex="0">node_modules</code> directory. Node modules can be installed from <a href="https://www.npmjs.com/" rel="nofollow noreferrer ugc">npm</a> with <a href="https://yarnpkg.com/en/" rel="nofollow noreferrer ugc">yarn</a>.</p><h3 data-id="stylesheets">Stylesheets</h3><p>This build process works with the <a href="http://sass-lang.com/" rel="nofollow noreferrer ugc">Sass preprocessor</a> and the <a href="http://lesscss.org/" rel="nofollow noreferrer ugc">Less preprocessor</a>. Only one preprocessor may be used at a time. A preprocessor is selected either through the <a href="https://docs.vanillaforums.com/developer/addons/addon-info#build" rel="nofollow noreferrer ugc">addon.json file</a> or as a <a href="https://docs.vanillaforums.com/developer/vanilla-cli/" rel="nofollow noreferrer ugc">command line argument</a></p><p>This tool has better support for Sass than Less. Less support exists primarily to facilitate the conversion of older addons.</p><h4 data-id="sass">Sass</h4><p>Source files should be placed in the <code class="code codeInline" spellcheck="false" tabindex="0">src/scss</code> directory. Any file ending in <code class="code codeInline" spellcheck="false" tabindex="0">*.scss</code> that does not begin with an underscore <code class="code codeInline" spellcheck="false" tabindex="0">_</code> is considered a source file. Filenames beginning with an underscore such as <code class="code codeInline" spellcheck="false" tabindex="0">_partial.scss</code> signify a partial. These do not get built on their own and must use the <code class="code codeInline" spellcheck="false" tabindex="0">@import</code> directive to include them. See <a href="http://sass-lang.com/guide" rel="nofollow noreferrer ugc">The Sass language guide</a> for more details.</p><h4 data-id="less">Less</h4><p>Source files should be placed in the <code class="code codeInline" spellcheck="false" tabindex="0">src/less</code> directory. Any file ending in <code class="code codeInline" spellcheck="false" tabindex="0">*.less</code> that does not begin with an underscore <code class="code codeInline" spellcheck="false" tabindex="0">_</code> is considered a source file. Filenames beginning with an underscore such as <code class="code codeInline" spellcheck="false" tabindex="0">_partial.less</code> signify a partial. These do not get built on their own and must use the <code class="code codeInline" spellcheck="false" tabindex="0">@import</code> directive to include them. See <a href="http://lesscss.org/features/#import-directives-feature" rel="nofollow noreferrer ugc">Less - The Import Directive</a> for more details.</p><h3 data-id="javascript">Javascript</h3><p>The javascript entry point is currently always found at <code class="code codeInline" spellcheck="false" tabindex="0">src/js/index.js</code> and will generate a bundle at <code class="code codeInline" spellcheck="false" tabindex="0">js/custom.js</code>. This tool does not currently support multiple javascript entry files or custom entrypoints/outputs. For custom entrypoints see the <a href="https://docs.vanillaforums.com/developer/vanilla-cli/build-process-core" rel="nofollow noreferrer ugc">core build process</a>.</p><h3 data-id="images">Images</h3><p>Image files can be placed in the <code class="code codeInline" spellcheck="false" tabindex="0">src/images</code> folder. Each image is its own entry. Images in the src folder will be minified using <a href="https://github.com/imagemin/imagemin" rel="nofollow noreferrer ugc">ImageMin</a> before they are copied to the output directory.</p><h2 data-id="output">Output</h2><h3 data-id="stylesheets-1">Stylesheets</h3><p>Each entry stylesheet will be run through their preprocessor and be outputed into the <code class="code codeInline" spellcheck="false" tabindex="0">design</code> folder with the filename <code class="code codeInline" spellcheck="false" tabindex="0"><entryname>.css</code>. So for an outputted file to be <code class="code codeInline" spellcheck="false" tabindex="0">design/myfile.css</code>, its source file would need to be located at <code class="code codeInline" spellcheck="false" tabindex="0">src/scss/myfile.scss</code> or <code class="code codeInline" spellcheck="false" tabindex="0">src/less/myfile.less</code>. Themes automatically load the css file located at <code class="code codeInline" spellcheck="false" tabindex="0">design/custom.css</code> a source file called <code class="code codeInline" spellcheck="false" tabindex="0">custom.scss</code> or <code class="code codeInline" spellcheck="false" tabindex="0">custom.less</code> is common. All partials will be resolved. See <a href="https://docs.vanillaforums.com/developer/vanilla-cli/bundling-process/#sass" rel="nofollow noreferrer ugc">Sass Bundling</a> and <a href="https://docs.vanillaforums.com/developer/vanilla-cli/bundling-process/#less" rel="nofollow noreferrer ugc">Less Bundling</a>for more information on how stylesheet bundling works.</p><h3 data-id="javascript-1">Javascript</h3><p>The single javascript entry will be bundled and outputted to <code class="code codeInline" spellcheck="false" tabindex="0">js/custom.js</code>. See <a href="https://docs.vanillaforums.com/developer/vanilla-cli/bundling-process/#javascript" rel="nofollow noreferrer ugc">The Bundling Process</a> for more information on how the build process works.</p><h3 data-id="images-1">Images</h3><p>Images are outputted with the same filenames and structure as their entries into the <code class="code codeInline" spellcheck="false" tabindex="0">design/images</code> folder.</p><h3 data-id="example-folder-structure">Example Folder Structure</h3><p>This build process relies on the addon having the following structure for its source files:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">addonfoldername |--src |--js |--index.js |--another-file.js |--scss |--some-entry-file.scss |--_not-an-entry-file.scss |--images |--image1.png |--image2.jpg </pre><p>Running a build on the given folder structure would would result in the following output files</p><pre class="code codeBlock" spellcheck="false" tabindex="0">addonfoldername |--design |--some-entry-file.css |--images |--image1.png |--image2.jpg |--design |--custom.js </pre><h2 data-id="bundling-process">Bundling Process</h2><p>See the <a href="https://success.vanillaforums.com/kb/articles/243-vanilla-cli-build-transformations" rel="nofollow noreferrer ugc">Bundling Process</a> page for details about the CLI bundles its assets.</p> </article> </main>