Gulp Mamp development

I am doing quite a lot of wordpress stuff and since using Gulp, i found happiness in my development environment, here are the most common modules that I used.

  • tiny-lr
  • gulp-coffee
  • gulp-sass
  • gulp-uglify
  • gulp-jshint
  • gulp-util
  • gulp-livereload
  • gulp-imagemin

So what I want to do with my wordpress development is that every time I made some changes to SASS / CoffeeScript or even when I saved the image it will reload the page automatically.

Below is my code for Gulp that I worked on wodpress development environment.

var lr = require('tiny-lr'),
g = require('gulp'),
c = require('gulp-coffee'),
sass = require('gulp-sass'),
min = require('gulp-uglify'),
jshint = require('gulp-jshint'),
gutil = require('gulp-util'),
livereload = require('gulp-livereload'),
imagemin = require('gulp-imagemin');

var server = lr();

// gulp coffeescirpt task, compile coffeescript into js and minify it
g.task('coffee', function(){
.on('error', gutil.log)

//Gulp minify js files.
g.task('compress', function(){

g.task('sass', function(){

g.task('image', function () {

g.task('default', function(){'coffee', 'compress', 'sass', 'image');

server.listen(8888, function (err) {
if(err) return console.log(err);'./compiler/coffee/**', function(){'coffee', 'compress');
});'./compiler/sass/**', function(){'sass');
});'./compiler/img/**', function(){'image')



This is a summary of my flow, Gulp watch my development Folders if any changes made there it has to reflect immediately, Watch my cofeescript / SASS folder,  if I made an change compile to javascript and minify it and place the file to javascript folder(‘/js’) and reload the browser, be sure that you have installed the live-reload chrome extension , same for Images,

There was a script that you need to include when u use wordpress, copy the below code and paste it on your function.php

[cc lang=”php”]

function live_reload() {
<script>document.write(‘<script src=”http://’ + ( || ‘localhost’).split(‘:’)[0] + ‘:8888/livereload.js?snipver=1″></’ + ‘script>’)</script>
<?php }
add_action(‘wp_footer’, ‘live_reload’)

I made my watch server to listen on 8888 to avoid any conflict since the MAMP already using the default port 35729.