Scripts
JavaScript scripts are supported out-of-the-box.
JavaScript
Custom JS script .js
files are stored in the folder [project]/assets/raw/js
, JS files in this folder will be concatenated into one file called app.js
and stored into [..]/assets/js
when the compilation process is executed (read about gulp compilation.
Subfolders under [...]/assets/raw/js
will have all its JS files concatenated into a single file with the same name and stored into [..]/assets/js
, for example, all files in subfolder [...]/assets/raw/js/admin
will be concatenated into [..]/assets/js/admin.js
.
Create command
php ayuco create js:{filename} {template}
{filename} | The JavaScript filename. |
{template} | (OPTIONAL) The script template to use, for example jquery . |
Command samples:
php ayuco create js:functions
The example above will create the script file assets/raw/js/functions.js
.
php ayuco create js:theme jquery
The example above will create the script file assets/raw/js/theme.js
; Inside jQuery will be initialized because the command included jquery
as the script template.
Vendor Scripts
3rd party developed script files (vendor scripts) should be added to the project as a dependency using NodeJS (this will follow the dependency injection design pattern).
The majority of vendor scripts are already supported on NodeJS. For example, to include VueJS in the project run its install command:
npm install vue --save
The example above, will download the dependency and store it inside the folder [project]/node_modules
.
Add a dependency script as an asset
Downloaded dependencies need to be copied inside the [project]/assets/js
folder to be accessible by the framework.
Custom gulp tasks must be included inside the file gulpfile.js
to transfer vendor files inside the assets folder.
// -------------- // START - CUSTOM TASKS gulp.task('vendorjs', async function() { return gulp.src([ './node_modules/vue/dist/vue.min.js', '[other-vendor-file].js', '[other-vendor-file].js', ]) .pipe(gulp.dest('./assets/js')); });
In the example above, "VueJS" and other vendor files are copied by the custom gulp task vendorjs
.
Custom gulp tasks must be added to the file [project]/package.json
so these are registered and taken into account during compilation and deployment, see the example below:
{ "...", "prescripts": [ "vendorjs" ], "..." }