src/js, while the compiled resources are placed in
Gulp takes any
*.js file placed directly inside
src/js as a source, and individually compiles each one of them.
By default, two of these top-level files are included:
scripts.js, the main file which acts as the index where all other single sub-modules are included. You should not write your scripts here, but rather use sub-files.
bootstrap.js, that bundles together Bootstrap and its required dependency Popper.
Your own custom scripts should be written in their own files, placed in sub-folders of
src/js, that you must then individually include in
Bricks comes with a couple of components out of the box, which you can take as a reference on how to structure your code (i.e.
Some optional libraries integrations are also included from
scripts.js, but disabled by default (more info about this on the integrations section of this documentation).
Both in Development and Production:
- Source files are bundled with Rollup.
- Source code is transpiled by Babel (i.e. ES6 will be converted into browser-readable code).
Only in Development:
- Sourcemaps (
*.js.map) are created.
Only in Production:
- The final bundles are minified with Terser (opens new window).
Bricks uses the standard WordPress
wp_enqueue_script('bootstrap-bundle', get_template_directory_uri() .'/dist/js/bootstrap.min.js', false, $theme_version, true ); wp_enqueue_script('brk-scripts', get_template_directory_uri() .'/dist/js/scripts.min.js', false, $theme_version, true );
WordPress natively includes jQuery and many plugins rely on it to work properly, so you can use it even in your custom theme if you really need it. Anyway, jQuery is not actively supported by Bricks and its use is not encouraged.
More details about this on the Linting page of this documentation.