whatwedo / gulp-wp-theme

gulp build system for developing WordPress themes | UNMAINTAINED

Currently unmaintained because we're not doing less frontend work than before.

---

gulp-wp-theme

gulp-wp-theme, namely gulp Wordpress Theme, is a build system made with gulp for programming and compiling WordPress Themes using browserify and CSS precompilers.

It includes the following tools, tasks, and workflows:

• Browserify (with browserify-shim) – Make modularized JavaScript in a node like manner and output different bundles.
• Watchify – caching version of browserify for super fast rebuilds)
• Stylus – CSS precompiler and syntax
• BrowserSync – for live reloading and a static server
• A bump task to update the version numbers of your theme.
• A changelog task to pull out a HTML changelog you could use to build into your themes configuration or the WordPress dashboard.
• Image and SVG optimization
• Error Notifications in Notification Center
• Pre configured global WordPress jQuery for use with browserify
• Different configs for development, production and user specific environment

How to use

Take a look at the documentation.

Contribution

We are open for any contribution to this project as long it's useful in WordPress Theme projects. Our projects are dog food proven, means we use it in our daily projects.

gulp-wp-theme's Issues

Add autoprefixer + config

Add core config

Add a core config to util which is loaded in any case with default configs. This solves the problem of missing configuration parameters on updates if the developer doesn't replace the development and production configs.

This enables to overwrite the util and tasks folders as long the developer only changes configs in the gulp folder. After overwrite, alls tasks still work and new tasks can grab their configs from the core configuration. This enables the developer then to add configurations of newly added tasks to his config.

Add Asset Versions with gulp-rev and rev-del

Generates assets with new file names on file changes.

Example:

return gulp.src(config.src)
    .pipe(plumber())
    .pipe(stylus(config.options))
    .pipe(gulp.dest(config.dest))
    .pipe(autoprefixer(require('../../config').autoprefixer))
    .pipe(rev())
    .pipe(gulp.dest(config.dest))
    .pipe(rev.manifest())
    .pipe(revDel({ dest: config.dest }))
    .pipe(gulp.dest(config.dest))
    .pipe(reload({
      stream: true
    }))
    .on('error', handleErrors);

Writes a rev-manifest. Example:

{
  "style.css": "style-cad83a5a.css"
}

Which can then be read by functions.php

function get_http_response_code($url) {
    $headers = get_headers($url);
    return substr($headers[0], 9, 3);
}

function theme_scripts() {
    $styles = get_stylesheet_uri();

    if(get_http_response_code(get_template_directory_uri().'/rev-manifest.json') == "200"){
        $assetManifest = file_get_contents(get_template_directory_uri().'/rev-manifest.json');
        $assets = json_decode($assetManifest, true);
        $styles = get_template_directory_uri() . '/' . $assets['style.css'];
    }

    // Bling bling you know
    wp_enqueue_style( 'farner-campaigning-styles', $styles);
}

Add JS testing framework: Karma w/ Mocha, Chai and Sinon

See vigetlabs/blendid#88

Error: Cannot find module 'yargs'

Error: Cannot find module 'yargs'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/var/www/wordpress/wp-content/themes/gulp-wp-theme/gulp/config.js:14:12)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Add possibility to bump version via command

Via gulp-bump or there may be other solutions.

In minimum:

• package.json
• bower.json

Would be great:

• Theme version number in style.css

PKG_VERSION placeholder seems not to work in markup files

e.g. using it in functions.php, it doesn't get replaced on compilation.

Installation & run fails on latest NPM version.

See browserify/browserify/pull/1247

Add MAKE shortcuts for updating WordPress + Plugins

http://wp-cli.org/commands/core/

TypeError: gulp.task is not a function

... during gulp watch task

Handling update routine

For a final release of a version 1.0.0 we should consider adding a update routine.

We could send it to NPM and providing the hooks for extending and configuring or we have to add some other way to separate the core from additions and configuration.

Remove extended dependencies

Remove:

• CoffeeScript
• Handlebars
• LiveReload

Replace bower normalize.styl with npm normalize-styl

https://github.com/bymathias/normalize.styl

Cannot find module package.json

i dont know this is error because my version or not, i use
node v4.2.1
npm 3.5.4

i use cygwin to test it
i have problem to start the script
Error: Cannot find module '/cygdrive/g/gulp/gulp-wp-theme/package.json'

i solve this by change var packageConfig = require(process.env.PWD + '/package.json');
to var packageConfig = require('../package.json');

in gulp config-development and config-production

i have question why not change it to
var packageConfig = require('../package.json');
i think its save for other operating system

Version 2

Notes and ideas for a more enhanced version

• Replace Stylus with PostCSS & cssnext
• Replace browserify with webpack and babel
• Modularized folder structure
• Yeoman generator

Replace Stylus with PostCSS & cssnext

Enables writing raw CSS with future proof rules, defined in the CSS3 and Selector Level 4 spec.

Enables writing Selector Level 4 standards
http://cssnext.io/

For example, generic imports with globbing
https://github.com/postcss/postcss-import#glob

Replace browserify with webpack and babel

Enables easier consumption of external packages. Future proof JavaScript by writing ES6 and ES7 standards and compile them to ES6 or ES5 with babel.

Modularized folder structure

Using SMACSS like folder structure not only with CSS. Put things together so it could be copied by folder and embedded in another application.

Yeoman generator

Create a yeoman generator for easier project initialisation.

Project generator with gulp-prompt

It would be easy to make some kind of CLI menu with gulp-prompt, helping with the configuration and scaffolding parts of a project.

Error: Cannot find module 'gulp-ruby-sass'

Looks like it has to be installed globally after all. No mention of that in the README

Add Browsersync Refresh on WordPress save

Browsersync have got a new API since v2.6.0. It enables to inject custom reloading which makes it possible to reload on database changes.

/* PHP pseudo codez */
add_action( 'save_post', function() {
    http_get("http://localhost:3000/__browser_sync__?method=reload");
});

Theme rename task

Gulp task to rename the theme. User should input a slug and name.

• Slug: used as names in package.json, bower.json and as theme folder name on output.
• Name: Used in style.css as theme name, visible to WordPress Admins.

Very handy when starting a new project.

Show CHANGELOG.md contents on wp-admin entry screen

Make theme updates visible on the admin home screen.

Add clean task to remove files

By now, for example if you delete templates, they will not be deleted in the dev or productive theme folder.

Add a clean task to clean folders before build or compile and removing files of the specific watcher task on watch.

Note
gulp-clean should not be used since it may be black listed. You may use node fs.

Add version placeholder to README inside gulp folder + VERSION file

This makes it easy to recognise on which version of the build system the current one is based. Thus if there are documented update routines, it's easy to get the right one.

Make production task default

See whatwedo/gulp-boilerplate#2

/src/bower_components/normalize-scss tracked?

Why is this directory in source control?

userConfig-example.js in Readme.md is obsolete

Can't find userConfig-example.js in gulp. From the commit histories it looks like something refactored into config.js? Needs an update in Readme

Update bower resources

• Update bowerrc path
• Change normalize.scss to stylus version

Uglifify not found

Seems like uglify transform doesn't work anymore.

Stylus not recompiles on changes in subfolders

The watcher task have to watch all files in all subfolders.

gulp markup fails because of substitution

The markup tasks files at the moment, looks like a problem with the javascript substitution.

Make watcher task restart if new files are added to scope

At the moment, the watcher continues running, but does no watch newly added files.

Watcher stops if Sass compile error occurs

The watcher stops all tasks when a Sass error occurs and have to be restarted.

Better error handling needed, so error shows in command but does not stop the other tasks.

How to enqueue or use jQuery with Browserify config

I'm new to Browserify, and trying to grok how you'd use jQuery in this theme, and not seeing it enqueue'd or anything in source, but do see the browserify-shim being declared, and kind of understand that. Do you typically enqueue the Google CDN version on entire WP site, or is there a different method of dependency management with Browserify that I'm not seeing?

Any change you could provide a quick example of how you'd use, say: jQuery MatchHeight in this theme with Browserify please?

Thanks for your time!