JavaScript scripts are supported out-of-the-box.

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}

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.

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"
  ],
  "..."
}