In an earlier article on this site, I introduced Sage, the WordPress theme framework formerly known as Roots. Since then I have been using this framework to build WordPress themes, and along the way I summarized a few practical tips that are worth sharing.
Install Gulp globally and link it in the theme
Sage uses Gulp to build the static assets in a WordPress theme. Before using it, we need to run npm install to install the dependencies. Network speed can be slow sometimes, and installation may fail occasionally. You can retry a few times or try cnpm. Once the dependencies are installed, we can use Gulp in the theme. But then another question comes up: when we develop the next theme, do we have to install all of it again?
When running npm install, Gulp and all of its dependent packages are installed into the theme’s node_modules directory. The full installation can easily take more than 100 MB. If you are developing multiple themes, reinstalling the same Gulp packages for each one is both slow and wasteful. Is there a way to install once and reuse it everywhere?
We know that Gulp can be installed globally or locally. Local installation means it lives inside the theme directory. We can install it globally, then run npm link gulp to link it into the local theme so it behaves like a local install. To make this more convenient, I wrote a batch file. Whenever I create a new theme, I only need to run that batch file instead of waiting through a full install again.
@echo off
call npm link asset-builder
call npm link browser-sync
call npm link del
call npm link gulp
call npm link gulp-autoprefixer
call npm link gulp-changed
call npm link gulp-concat
call npm link gulp-flatten
call npm link gulp-if
call npm link gulp-imagemin
call npm link gulp-jshint
call npm link gulp-less
call npm link gulp-load-plugins
call npm link gulp-minify-css
call npm link gulp-plumber
call npm link gulp-rename
call npm link gulp-rev
call npm link gulp-sass
call npm link gulp-sourcemaps
call npm link gulp-uglify
call npm link imagemin-pngcrush
call npm link jshint-stylish
call npm link lazypipe
call npm link merge-stream
call npm link run-sequence
call npm link traverse
call npm link wiredep
call npm link yargs
call npm link minimist
call npm link gulp-pleeease
@echo 链接完毕Copy the code above and save it as a .bat file.
Combine Sage with other WordPress frameworks
Sage mainly does the following things for us:
- It changes the theme logic so theme code can be reused more effectively.
- It provides a complete Gulp-based front-end workflow.
- It streamlines and optimizes some WordPress theme code, such as the relative URL feature.
When you are building a relatively simple theme, such as a blog theme, this framework is a very good fit. But when you are building a more complex CMS-style theme, the template logic modified by Sage can sometimes feel less suitable.
In that situation, we can extract Sage’s front-end tooling and use it together with another WordPress framework. In my own projects, I often use the Underscores framework. Extraction is very simple: just take the following files and place them into Underscores.
package.json: defines the Node.js packages that need to be installed.gulpfile.js: defines the Gulp tasks.bower.json: defines the front-end asset dependencies.assets: the theme’s own front-end assets.
Sage is an excellent WordPress development framework. It is worth trying, and once you use it you will likely find your work becoming much easier. If you discover useful tips or run into problems while using it, share them in the comments.
