Craig Simpson

Web developer from Moray, Scotland

Gulp WP Toolkit JavaScript Configuration

18th May 2018

No Comments

When using Gulp WP Toolkit in your WordPress theme build you can concatenate and minify your JavaScript files easily. With some minimal configuration, the toolkit will concatenate your specified files and create an expanded version and a minified version.


Concatenate multiple source files into one file

This feature is useful if you have a global JavaScript file which you’d like to load everywhere, and then other JavaScript files for specific website features or pages (like a JS file which is specific to the account section of the website). Configuration should be set within toolkit.extendConfig() and with a js key. For example:

toolkit.extendConfig({
/* ... Shortened for readability. */
js: {
'global': [ /* File will be output as global.js and global.min.js */
'develop/js/responsive-menus.js',
'develop/js/backstretch.jquery.js',
'develop/js/bxslider.jquery.js',
'develop/js/main.js'
],
'account': [ /* File will be output as account.js and account.min.js */
'develop/js/rate-calculator.js',
'develop/js/profile.js',
'develop/js/account-init.js'
]
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

Output JS files in a different directory

The default path for JS files to be output is /js within your theme directory. You can change this path by updating the dest configuration. For example, if you wanted your JS files to be output to assets/js your configuration should read:

toolkit.extendConfig({
/* ... Shortened for readability. */
js: {
'global': [ /* File will be output as global.js and global.min.js */
'develop/js/responsive-menus.js',
'develop/js/backstretch.jquery.js',
'develop/js/bxslider.jquery.js',
'develop/js/main.js'
],
'account': [ /* File will be output as account.js and account.min.js */
'develop/js/rate-calculator.js',
'develop/js/profile.js',
'develop/js/account-init.js'
]
},
dest: {
js: 'assets/js/', /* Output finished JS inside /assets/js/ */
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

Note that the dest key should be at the same level as the js key not nested inside.

Leave a Reply

Your email address will not be published. Required fields are marked *