Setting Up Wordpress with Underscores and Gulp

Nov 21, 2016 underscores wordpress gulp sass
WhatsApp
Let’s get a fresh install of Wordpress running with a bare bones theme called Underscores. We’ll use this as theme - if you like to build a clean and less bloated website for your portfolio or ecommerce store and we’ll also set up SASS with Gulp. I’m also be using MAMP as my local server environment.

Download the latest Wordpress from their website. Navigate to your local development folder with the localhost:xxxx/yourProjectArea. At this point you’ll have to run through the Wordpress setup but to continue we’ll create our own custom database otherwise it’ll pop up with an error. So open MAMP, select “Open webstart page” and a new window will pop up showing the MAMP welcome screen. We need to reach the PhpMyAdmin page to create our new database so select Tools -> PhpMyAdmin then create your database.

Return to the Wordpress setup and enter the name of the database you just created and we’re done setting up Wordpress.

Moving on to the theme Underscores which you can download at underscores.me, select ‘advanced options’ and make sure ‘_sassify’ is selected. Enter the remaining options and click generate. Extract the theme and place it in your Wordpress themes folder.

Most of our set up is complete and we’ll continue with prepping Gulp as our main task runner so that we can compile our sass/scss files. Let’s set up Gulp with npm - assuming you have npm installed and the correct version. First navigate to the theme folder then run the following commands -



npm install --global gulp

npm install --save-dev gulp

npm install --save-dev gulp-util
npm install --save-dev gulp-sass
npm install --save-dev gulp-sourcemaps
npm install --save-dev gulp-livereload
npm install --save-dev gulp-plumber


// grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
liveReload = require('gulp-livereload'),
plumber = require('gulp-plumber');

// create a default task and just log a message
gulp.task('default', function() {
return gutil.log('Gulp is running!')
});

gulp.task('build-css', function() {
return gulp.src('sass/**/*.scss')
.pipe(plumber(function (error) {
gutil.log(error.message);
this.emit('end');
}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('public/assets/stylesheets'));
});

gulp.task('build-js', function() {
return gulp.src('source/js/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/assets/javascript'));
});

gulp.task('watch', function() {
liveReload.listen();
gulp.watch('source/js/**/*.js', ['jshint']);
gulp.watch('sass/**/*.scss', ['build-css']);
});


Make sure the paths are correct for the .scss files or it will not compile properly. For the theme underscores we’ll want to begin looking for the folder ‘sass’.

The javascript above will run gulp and have it constantly running, any error messages will not interrupt flow, rather it will print the error message with the offending line and continue normal operation without compiling the sass file.

If you found the following info helpful, I'm happy to accept any donations of the following cryptocurrencies.

  • Bitcoin - 17DTiPExzP9StqveW428acEyB4mVMfKbiK
  • Ethereum - 0x87B8307FD20dc90cc05c94905Ec593134D32B6FF
  • Litecoin - LZMiz5U5sVq9doMLYE3gfLJrxCQDKuyCmU
  • Neo - AXv71WB38ajc1KUUEnxQKhynLLPc4BapVb