Using NPM and Gulp with WordPress

Why All The Fuss?

There are a lot of tasks we need to do that are dreadful and time-consuming when building a great WordPress site. Creating image sprites, updating versions of various vendor scripts to get the latest features in your project, and optimizing your code for the web can become repetitive fast. Thankfully, we can automate away much of this drudgery. To do this, we’ll look towards pairing npm & Gulp with a custom WordPress theme.

The Shiny Tech

WordPress

WordPress is open source software used to create websites, blogs, and applications. Central to WordPress’s success is the CMS and extensive offering of plugins that add a nearly unlimited ability to customize your site. This makes for a great start on a project, but there are technologies that can be paired with a robust WordPress theme to boost site performance, rapidly speed up development, and improve maintainability.

npm

npm, or Node Package Manager, is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages. Once we install Node and npm, we can quickly install and update packages of software in our WordPress theme that will aid us in developing our site.

Gulp

Gulp.js is a toolkit for automating painful or time-consuming tasks in your development workflow. When we write gulp tasks to utilize our npm packages, this is where the magic happens.

The Shinier Amalgamation

Let’s go through a few examples where we automate or organize our workflow using WordPress, Gulp, and npm together:

Write high-performing, well-supported, maintainable CSS

We can develop our sites using any number of modular SCSS files to improve the maintainability of our CSS. Using Gulp, we would automate their conversion to CSS using the npm package gulp-sass. From there, we’d also use gulp and npm packages to create a source map linking our SCSS declarations to our final CSS file and automatically add browser prefixes to our modern CSS declarations to painlessly add support for older browsers. Lastly, we’ll automate the concatenation and minification of our stylesheets to reduce the size and number of HTTP requests for stylesheets on each page load. Finally, we’ll feed our styles to Browsersync, a tool that lets us view our changes across multiple devices at once. Let’s see this script in action:

/**
* Compile styles and feed them to BrowserSync
*/
gulp.task( 'styles', function() {

return gulp.src( srcStylesPath + 'imports.scss' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( cssGlobbing({ extensions: ['.scss'] }) )
    .pipe( sourcemaps.init() )
    .pipe( sass({outputStyle: 'expanded'}) )
    .pipe( autoprefixer( 'last 2 version' ) )
    .pipe( concat( 'style.css' ) )
    .pipe( cssnano() )
    .pipe( sourcemaps.write( '.' ) )
    .pipe( gulp.dest( webThemePath + 'css/' ) )
    .pipe( browserSync.stream() );

});

Be a JavaScript ninja

We can write modern ES6+ JavaScript and automatically compile it down to the old-browser-friendly ES5 syntax using the babel npm package. Then, similar to what we did to our styles, also automate the use of packages to concatenate and minify our JavaScript files to reduce the size and number of HTTP requests for scripts on each page load.

Dread-free image sprites

We can write gulp tasks to use an npm package to automate the creation of an image sprite, reducing the number of HTTP requests for images on each page load.

A peaceful co-existence with vendor scripts

When we install the npm packages for vendor scripts such as jQuery or Font Awesome, we can not only easily update the version of all our packages by simply running npm install, but we can also pipe their contents into our theme every time we run Gulp. Keep in mind, npm install will only run on packages with minor version updates to prevent breaking changes from occurring. Let’s see what our vendor Gulp task could look like:

/*
* Grab necessary vendor files from node modules, dump them into the vendor directory in src
*/
gulp.task( 'vendor', function() {

// jQuery
gulp.src( 'node_modules/jquery/dist/jquery.min.js' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/jquery/' ) );

// Slick CSS & JS
gulp.src( 'node_modules/slick-carousel/slick/slick.js' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/slick/' ) );
gulp.src( nodeModulesPath + 'slick-carousel/slick/slick.css' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/slick/' ) );

// Font Awesome Pro Web Fonts with CSS
gulp.src( 'node_modules/@fortawesome/fontawesome-pro/css/all.min.css' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/fontawesome/css/' ) );
gulp.src( 'node_modules/@fortawesome/fontawesome-pro/webfonts/*' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/fontawesome/webfonts/' ) );

// Animate.css
gulp.src( 'node_modules/animate.css/animate.css' )
    .pipe( plumber({ errorHandler: notify_error }) )
    .pipe( gulp.dest( 'src/theme/vendor/animate-css/' ) );

});

When we run our vendor gulp task, we look through four different node modules in our project for the file or files we specify. Whatever we find, we first check for errors, then we pipe them into a specified directory in our src directory, which then gets gulped down again into a final web or distribution directory. The distribution version is what ends up on the web while we retain our modular src version. The difference between the two is that the distribution version contains all of our core WordPress files and is compiled, concatenated, and minified as much as possible.

Sip The Kool-Aid

Give npm and gulp a try on your next WordPress project. You can also check out some of our recent creations using these tools together.