Solid uses a workflow powered by GulpJS. This workflow processes your SCSS, JS and images. This will result in the smallest possible files that load faster and are usable by most browsers.
The source directory is the
/src folder to the distribution directory. For example, PSD files will not be ignored.
Files that are ready for distribution end up in the
/dist folder. Here you will find the exact same directory and file structure as in your source directory, but the files will have been processed. All CSS and JS files will be compiled, minified and concatenated into one file. Images will have been minified, and files that are not needed in distribution such as SCSS and PSD files are filtered out.
Gulp processes the files in your source directory according to the configuration in
Gulpfile.js. Here, various processing pipelines are defined that take files from a source directory, apply various functions to them and spit them out in the distribution directory. You can easily modify the Gulpfile yourself to change the workflow to your needs.
All CSS and SCSS files from the
/src/css folder are processed as follows:
- SCSS is compiled to CSS
- CSS is autoprefixed
- CSS is minified
- Resulting CSS files are placed in
All JS files from the
/src/js folder are processed as follows:
- JS is concatenated into one
- JS is minified
main.jsfile is placed in
All JPG, PNG, GIF and SVG files from the
/src/img folder are processed as follows:
- Images are minified
- Resulting image files are placed in
Plugins & libraries
/src directory contains two folders that are separated from the standard processing pipeline. These folders are the
libfolder contains libraries such as jQuery and Popper.js. They are simply copied to
plugins.jsfile, which ends up in
/dist/js. Each plugin CSS file has to be manually imported in the source of the stylesheet in order to include them in
/dist/css/solid.css. For more information on controlling plugins, check the plugins page.
Other files that are part of your website may also be placed in the source directory. They will be copied to the distribution directory if they are added to the configuration in the Gulpfile. For example, font and HTML files will be copied to the distribution directory, keeping the folder or path structure they had in the source directory. The following files are excluded in this copy: