Removing unused assets

Assets/Files used per page

All files within /src/assets are automatically copied to /dist/assets by Gulp when you run yarn gulp or yarn gulp build OR whenever you edit or add new files.

Gulp will also create a file called assets-map.json within /dist/assets which lists all the assets used per page so you can keep track of your file assets. In addition, when you run yarn gulp build the assets-map.json file used to remove any files from /dist/assets that are not currently in use within your HTML files.

Config options To disable the removal of unused assets you can set buildSettings.unusedAssets: false in your config.PROJECT.js file.

yarn gulp build will also compress your image files to make them as small as possible when copied to /dist/assets, this step can take awhile if you have a lot of images so it’s only run on the build command.

To reference assets in your HTML simply use /assets/img/FOLDER/FILE.EXTENSION.

CSS

Thanks to the awesomeness of Gulp and purifycss you can now streamline your final CSS code before you launch your site.

Once you’ve done developing your site or at any point you like simply do the following:

Remove any unused .html files from the site root
In terminal, run command: yarn gulp build

This will compare the CSS selectors used in the HTML files with the CSS in the CSS files (assets/css) and remove any CSS not being used.

Javascript Plugins

We use Gulp to pull all our .js files together into script.s & script.min.js. This means you can since version 3.1.0 easier remove plugins you don’t need simply by deleting them from the /src/assets/js/src/plugins directory or by changing the .js file extension.

Config options

You can alter the Javascript files compiled by AppStrap Docs using the paths.src.JSSourceFiles file glob. The order is important but you can for example exclude a given plugin using '!./src/js/plugins/fakeLoader.js' in the glob. Similarly with paths.src.JSSourceFilesVendors which compiles the vendor packages needed for AppStrap Docs.

When the config setting includeCustomJS: true is set /dist/assets/js/custom.script.js is automatically included in HTML files. You can also add additional Javascript files to your pages using additionalJS for example:

  additionalJS: [ // add additional JS files to footer
    './projects/myproject/js/custom1.js',
    './projects/myproject/js/custom2.js'
  ],

Examples