Gulp livereload install#

assets/svg/individual – Contains any SVG files I would like to use in my SVG icon system.

assets/sass/ – All the other SASS files.

assets/sass/style.scss – My main SASS file, which contains imports for all the other sass files.

assets/js/vendor – Contains any vendor Javascript files, things like Bootstrap and Modernizr.

assets/js/app – Contains all of my custom Javascript files, which gulp will combine.

The other important folder is assets which includes all of my front-end files. In the root directory, we’ve already created the package.json file, and we’ll create the gulpfile.js in just a minute. You’ll notice that a lot of my decisions in gulp are dependent on this, but they can easily be changed. I just want to quickly note my folder structure. That last flag, -save-dev will automatically save this to a list of dependencies in your package.json file, so you can easily pass the directory around.

Gulp livereload install#

When that’s finished, the last step is to install gulp locally to your WordPress theme folder. This will step you through the process of creating a package.json file. To create this file, just navigate to your theme’s directory in the terminal and run: npm init This is basically just a config file that Node uses to figure out which packages it needs to bring down and install (things like a SASS concatenate or a JavaScript linter or any number of other tools). In the root directory of your theme file, you will also need to install and set up a local version of gulp, and add a package.json file to manage your dependencies. This will ensure that you can use the gulp command from the command line. With Node installed, you can install gulp globally on your system by opening up your Terminal and running: npm install -g gulp If you’re not set up with Node yet, I’d recommend following the steps on their website (or better yet, installing Homebrew). Setting Things Upįirst off, gulp runs on top of NodeJS, and is generally operated from the command line.

But by the end you’ll be compiling SASS, minifying Javascript, working with livereload and implementing a SVG icon system.

My goal was to write a short introduction to how this works. For those unaware, Gulp is a slick JavaScript task runner, which can be used to concatenate JS and CSS files, lint files, and generally automate your front-end workflow. For a little while now, I’ve been using Gulp in my WordPress themes to automate my front-end workflow and add some handy helpers along the way.