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(){
g.src('./compiler/coffee/*.coffee')
.pipe(c({bare:true}))
.on('error', gutil.log)
.pipe(g.dest('./compiler/'));
});

//Gulp minify js files.
g.task('compress', function(){
g.src('./compiler/*.js')
.pipe(min())
.pipe(g.dest('./js/')).pipe(livereload(server));
});

g.task('sass', function(){
g.src('./compiler/sass/*.scss')
.pipe(sass())
.pipe(g.dest('')).pipe(livereload(server));
});

g.task('image', function () {
g.src('./compiler/img/**')
.pipe(imagemin())
.pipe(g.dest('./images'));
});

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

server.listen(8888, function (err) {
if(err) return console.log(err);

g.watch('./compiler/coffee/**', function(){
g.run('coffee', 'compress');
});

g.watch('./compiler/sass/**', function(){
g.run('sass');
});

g.watch('./compiler/img/**', function(){
g.run('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”]

<?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.