January 16, 2014

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.

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"]

<?php
function live_reload() {
?>
<script>document.write('<script src="http://' + (location.host || '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.