wordpress-theme-gulp-boilerplate

Drop-in Gulp tasks for WordPress theme development.

Includes:

• Image optimization (imagemin).
• Less, Sass, and PostCSS processing and minification (sourcemaps, autoprefixer, cssnano).
• JavaScript linting, compiling, and minification (eslint, babel, uglify).
• Delivery folder generation - clean and ready for distribution to staging, production, etc.

Installation

Step 1: Add global packages to your computer.

• Required: node & npm, gulp-cli
• Optional: yarn

Step 2: Drag these files into your theme folder (or just rename and use the current folder):

• .gitignore
• gulpfile.babel.js
• package.json
• yarn.lock

Step 3: Navigate to your theme directory via CLI and run this script:

mkdir src && mkdir src/images src/scripts src/styles && touch src/images/screenshot.png src/styles/style.css

Step 4: Move pre-existing theme images, styles, and scripts to their respective folders.

Step 5: Install dependencies:

yarn

Optional:

• Update .gitignore with your own settings.
• Change any source stylesheet extensions to: .less or .scss.
• Create a stylesheet for localization: touch src/styles/rtl.css

Configuration

Default paths and plugin-configurations can be modified to your liking, but anything beyond that may require some Gulp file refactoring. Additional documentation provided via comments within gulpfile.babel.js

Notes:

• Use a bang to avoid comments from being stripped out of stylesheets, ex: /*! ... */
• Vendor files must have the suffix .min to avoid being processed.
• All Gulp tasks can be run independently, for either environment, ex:
  • Development: gulp styles
  • Production: NODE_ENV=production gulp styles

Development

1. Start a server running your WordPress project at the default proxy: localhost:8888
2. Run the default script.

Default script:

Processes source files, lints scripts, starts a BrowerSync server on port 3000, and watches for file changes.

yarn start

Other scripts:

Clears cache and deletes everything generated. This is your reset button.

yarn run clean

Lints JavaScript source files -- including gulpfile.babel.js, excluding files ending with .min.js.

yarn run lint

Staging/Production

Default script:

Processes/minifies/moves files to the configured output folder for distribution.

yarn run build