• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Craig Simpson

  • Home
  • About
  • Plugins

18th May 2018 — 0

Gulp WP Toolkit JavaScript Configuration

A walkthrough of the different configuration options for JavaScript in Gulp WP Toolkit.

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
  • Output JS files in a different directory

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.

Workflow

Reader Interactions

Leave a Reply Cancel reply

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

Footer

Get more by email

Subscribe to my email newsletter for a monthly digest of my blog posts, as well as exclusive developer content and curated links to useful resources.

Copyright © 2015–2022 Craig Simpson • Built on the Genesis Framework

Twitter GitHub