Simple gulp tasks for WordPress theme development.

README.MD

Copy the package.json and gulpfile in your theme folder "wp-contents/themes/your_theme" and edit package.json and gulpfile as your needs. install node modules by npm install or yarn and then run gulp to start development enviroment with sass and live reload.

Directory structure

• your_theme
• sass <- Containing your .scss or .sass files.

Commands

gulp sass sass:watch genpot

gulpfile.js

var gulp 	= require('gulp'),
	sass 	= require('gulp-sass'),
	bs 		= require('browser-sync'),
	pot 	= require('gulp-wp-pot'),
	prefix 	= require('gulp-autoprefixer');

gulp.task('sass', function () {
	return gulp.src('sass/**/*.{sass,scss,css}')
		.pipe(sass({
			outputStyle: 'expanded',
			indentType: 'tab',
			indentWidth: 1
		})
		.on('error', sass.logError))
		.pipe(prefix({'browsers': ['last 10 version']}))
		.pipe(gulp.dest('./'))
		.pipe(bs.stream());
});

gulp.task('sass:watch', function () {
	gulp.watch('sass/**/*.{sass,scss,css}', ['sass']);
});

gulp.task('browserSync', function () {
	bs.init({
		proxy: "local.dev",
		port: 3000,
		ui: {
			port: 3001
		}
	})
});

gulp.task('genpot', function () {
	return gulp.src('./**/*.php')
	.pipe(pot( {
		domain: 'yourproject',
		package: 'Your_Project'
	} ))
	.pipe(gulp.dest('languages/yourproject.pot'))
});

gulp.task('default', ['sass', 'sass:watch', 'browserSync']);

package.json

{
  "name": "yourproject",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Aminul Islam <me@aminul.net>",
  "license": "GPL-2",
  "dependencies": {
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-wp-pot": "^2.0.4"
  }
}