whatwedo/gulp-wp-theme

gulp build system for developing WordPress themes | UNMAINTAINED

gulp-wp-theme's Issues

PKG_VERSION placeholder seems not to work in markup files

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

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.

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.

Remove extended dependencies

Remove:

• CoffeeScript
• Handlebars
• LiveReload

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.

Add MAKE shortcuts for updating WordPress + Plugins

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

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");
});

Stylus not recompiles on changes in subfolders

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

/src/bower_components/normalize-scss tracked?

Why is this directory in source control?

Installation & run fails on latest NPM version.

See browserify/browserify/pull/1247

Update bower resources

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

Show CHANGELOG.md contents on wp-admin entry screen

Make theme updates visible on the admin home screen.

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.

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.

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.

TypeError: gulp.task is not a function

... during gulp watch task

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.

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 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 autoprefixer + config

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

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

Uglifify not found

Seems like uglify transform doesn't work anymore.

Replace bower normalize.styl with npm normalize-styl

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

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.

Make production task default

See whatwedo/gulp-boilerplate#2

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

See vigetlabs/blendid#88

gulp markup fails because of substitution

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

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)

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

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.

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!