Category Archives: Resources

My First Gulp File

Gulp is an aid to creating a quicker workflow; automating tasks such as SASS compilation and CSS minification. If you are interested in getting started with Gulp there are plenty of resources.

Below is a simple gulpfile.js and config.json to demonstrate how quickly something can be knocked up, it will perform the following on both initial run and on file change;

  • compile SASS
  • minify CSS
  • minify JS

Gulpfile.js


var gulp = require('gulp'),
minifyCss = require('gulp-minify-css'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify');

var config = require('./config.json');

/*
* HELPER FUNCTIONS
*/
var displayError = function(error) {
var errorString = '[' + error.plugin + ']';

errorString += ' ' + error.message.replace("\n",'');

if (error.fileName) errorString += ' in ' + error.fileName;
if (error.lineNumber) errorString += ' on line ' + error.lineNumber;

console.error(errorString);
}

/*
* TASKS
*/
gulp.task('sass', function (){
gulp.src(config.sass.src).pipe(sass()).on('error', function(e) {
displayError(e);
}).pipe(gulp.dest(config.sass.dest));
});

gulp.task('minify-css', ['sass'], function () {
gulp.src(config.css.src).pipe(minifyCss()).pipe(gulp.dest(config.css.dest));
});

gulp.task('minify-js', function () {
gulp.src(config.js.src).pipe(uglify()).pipe(gulp.dest(config.js.dest));
});

gulp.task('default', ['minify-css', 'minify-js'], function() {
gulp.watch(config.sass.src, ['minify-css']).on('change', function(evt) {
console.log('[watch] file ' + evt.path.replace(/.*(?=sass)/, '') + ' was ' + evt.type);
});

gulp.watch(config.js.src, ['minify-js']).on('change', function(evt) {
console.log('[watch] file ' + evt.path.replace(/.*(?=js)/, '') + ' was ' + evt.type);
});
});

config.json


{
"sass" : {
"src" : [
"sass/*.sass",
"sass/*/*.sass"
],
"dest": "css"
},
"css" : {
"src" : [
"!css/min/**",
"!css/min",
"css/*.css",
"css/*/*.css"
],
"dest" : "css/min"
},
"js" : {
"src" : [
"!js/min",
"!js/min/**",
"js/*.js",
"js/*/*.js"
],
"dest" : "js/min"
}
}

When starting a new project running “gulp” on the command line will automatically run the default task – it is also possible to have different tasks to run in different circumstances such as a production and development task.

This is only a selection of what is possible – a large collection of plugins for Gulp are available.

User Specific Themes for WordPress

While creating my new website I noticed it wasn’t possible to have a specific theme for an individual user within WordPress. My aim was to change my personal user account to a development theme while visitors of the website would see a functional theme. The plugin I created allows the administrator or user to select which theme is used;

Theme selection dropdown
Select a theme for a specific user to use

WordPress provides a filter for changing the theme which is active on that page load, however this filter is executed before the user is identified. Therefore I had to create a session to store the user’s ID upon log in – the session variable is then removed on logout. If you would like to use this plugin, you can download it here.