An example gulpfile.js setup for WordPress theme and WordPress plugin development.
Past the requirements below, this project works out-of-the-box. Simply clone the project, install dependencies, and then run the gulp commands to see the project in action.
- View The Gulpfile.js for WordPress Themes and WordPress Plugins Documentation On Github Pages
Check that you have node, npm, gulp and composer installed.
node -v
npm -v
gulp -v
composer --version
Clone the gulpfile.js repo
git clone https://github.com/ChrisWinters/gulpfile.git gulpfile_test
cd gulpfile_test
Install Local Gulp Dependencies
npm install gulp
npm install --save-dev
gulp assetsto copy project assets to a temporary destination asset locationgulp allto compile all stylesheets & scripts, compress images, and create the translation filegulp watchto live reload changes made to the assets srcgulp stylesto compile the style.css, style.map.css, and style.min.css filesgulp scriptsto compile the scripts.js and scripts.min.js filesgulp imagesto compress png, jpeg, gif, and svg filesgulp translateto compile the text_domain.pot language filegulp bumpto bump version numbers in the README.md and package.json filesgulp cleanto remove the temporary /assets/ directory
Open /gulpfile.js/config.json
{
"project_url" : "gulpfile.localhost",
"js_dest" : "./gulpfile.js/tests/js",
"css_dest" : "./gulpfile.js/tests/css",
"imgs_dest" : "./gulpfile.js/tests/images",
"assets_src" : "./gulpfile.js/tests/assets-src",
"assets_dest" : "./gulpfile.js/tests/assets-dest",
"language_dest" : "./gulpfile.js/tests/lang",
"text_domain" : "gulpfile",
"bug_report" : "https://github.com/ChrisWinters/gulpfile/issues",
"translator_contact" : "Nobody <nobody@nobody.com>",
"team_contact" : "Nobody <nobody@nobody.com>"
}
Themes and plugins will replace ./gulpfile.js/tests with ./.
{
"js_dest" : "./js",
"css_dest" : "./css",
"imgs_dest" : "./images",
"assets_src" : "./inc/assets",
"assets_dest" : "./assets",
"language_dest" : "./lang",
}
- project_url Used for the
gulp watchcommand, set to your locally hosted project domain - js_dest Public facing /js directory that stores compiled scripts
- css_dest Public facing /css directory that stores compiled stylesheets
- imgs_dest Public facing /images directory that stores compressed images
- assets_src Custom location where a themes/plugins would store 'core' SCSS/CSS & JavaScript files
- assets_dest Custom temporary location where vendor and theme/plugin assets are copied to
- language_dest Public facing /lang directory that stores the .pot translation file
- text_domain The textdomain used for your project
- bug_report The URL where people can report translation related issues
- translator_contact The contact information for the translator
- team_contact The contact information for the translator team
The assets_src and assets_dest paths are vital to making the gulp tasks work correctly.
Most themes and plugins will set the paths like the example below, assuming core assets are located in a directory named /inc/.
{
"assets_src" : "./inc/assets",
"assets_dest" : "./assets",
}
Gulp will copy core assets from assets_src and into the temporary assets_dest location.
Most projects will require various customizations to the gulp tasks located in the /gulpfile.js/tasks directory.
For example, the assets.js file copies assets from assets_src to assets_dest. One of those assets is Bootstrap 4, copied from the 'node_modules' directory, which your project may not need.
- tasks/assets.js Copies assets from
assets_srctoassets_dest - tasks/bump.js Currently bumps version numbers in README.md & package.json files, other files will need to be manually added
- tasks/default.js The
watchtask may need to be customized to match your project layout - tasks/images.js The
imagetask may need to be customized to match your project layout - tasks/scripts.js Typically this file needs to be updated anytime the project adds new 3rd party JavaScript files
- tasks/styles.js Typically this file needs to be updated anytime the project adds new 3rd party SCSS files
- tasks/translate.js Creates .pot translation file, typically does not need customizations
- tasks/index.js No customizations needed
- config.json Gulp configuration file explained above
- index.js No customizations needed
Add the /node_modules/ directory to your .gitignore file node_modules/* and if you ftp/upload your projects, do not upload the /node_modules/ directory.
Once a project is completed manually delete the /node_modules/ directory.
Run npm install to restart the project, adding the /node_modules/ directory back to the project.
If this gulpfile project has saved you some time, helped you with your development needs, or if you would like to support my efforts, then I would gladly and greatly appreciate a donated cup of coffee. Thank you in advance for your support!
Copyright 2019 Chris Winters https://github.com/ChrisWinters/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.