Skip to content

Installation

Craig Simpson edited this page Oct 20, 2017 · 1 revision

Using the package is simple - within your custom theme create a package.json which has gulp and gulp-wp-toolkit as dependencies.

Make sure to update the other parts of your package.json too, as these will be pulled in to form the theme stylesheet header

Add a package.json to your theme like so:

{
  "name": "craigsimpson",
  "homepage": "https://craigsimpson.scot/",
  "version": "1.0.0",
  "author": "Craig Simpson <[email protected]>",
  "description": "Custom WordPress theme, based on the Genesis Framework.",
  "repository": "",
  "license": "GPL-2.0",
  "main": "Gulpfile.js",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-wp-toolkit": "^1.0.1"
  }
}

Then create a simple Gulpfile.js in your theme root, like this:

'use strict';

var gulp = require('gulp'),
    pkg = require('./package.json'),
    toolkit = require('gulp-wp-toolkit');

toolkit.extendConfig({
    theme: {
        name: "WordPress Theme Name",
        homepage: pkg.homepage,
        description: pkg.description,
        author: pkg.author,
        version: pkg.version,
        license: pkg.license,
        textdomain: pkg.name
    },
    js: {
        'theme' : [
             'develop/vendor/a.js',
             'develop/js/b.js'
         ],
         'something-conditional' : [
             'develop/js/standalone.js'
         ]
    }
});

toolkit.extendTasks(gulp, { /* Task Overrides */ });

Once your Gulpfile.js is in place, install all the dependencies using yarn install. If you're not already using Yarn, please see the installation instructions.

See the files in the example directory for more advanced configuration.

Installation

Tasks:

  • Build
  • Clean
  • Lint
  • Watch
  • Serve
  • Default
  • Bump

Default Theme Structure

Sass Bulk Import

Bower

Overrides

Clone this wiki locally