Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Setup for using gulp in developing and deploying WordPress themes
// Load plugins
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({ camelize: true }),
lr = require('tiny-lr'),
server = lr();
// Styles
gulp.task('styles', function() {
return gulp.src('assets/styles/source/*.scss')
.pipe(plugins.rubySass({ style: 'expanded', compass: true }))
.pipe(plugins.autoprefixer('last 2 versions', 'ie 9', 'ios 6', 'android 4'))
.pipe(gulp.dest('assets/styles/build'))
.pipe(plugins.minifyCss({ keepSpecialComments: 1 }))
.pipe(plugins.livereload(server))
.pipe(gulp.dest('./'))
.pipe(plugins.notify({ message: 'Styles task complete' }));
});
// Vendor Plugin Scripts
gulp.task('plugins', function() {
return gulp.src(['assets/js/source/plugins.js', 'assets/js/vendor/*.js'])
.pipe(plugins.concat('plugins.js'))
.pipe(gulp.dest('assets/js/build'))
.pipe(plugins.rename({ suffix: '.min' }))
.pipe(plugins.uglify())
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/js'))
.pipe(plugins.notify({ message: 'Scripts task complete' }));
});
// Site Scripts
gulp.task('scripts', function() {
return gulp.src(['assets/js/source/*.js', '!assets/js/source/plugins.js'])
.pipe(plugins.jshint('.jshintrc'))
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.concat('main.js'))
.pipe(gulp.dest('assets/js/build'))
.pipe(plugins.rename({ suffix: '.min' }))
.pipe(plugins.uglify())
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/js'))
.pipe(plugins.notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('assets/images/**/*')
.pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 7, progressive: true, interlaced: true })))
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/images'))
.pipe(plugins.notify({ message: 'Images task complete' }));
});
// Watch
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
// Watch .scss files
gulp.watch('assets/styles/source/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('assets/js/**/*.js', ['plugins', 'scripts']);
// Watch image files
gulp.watch('assets/images/**/*', ['images']);
});
});
// Default task
gulp.task('default', ['styles', 'plugins', 'scripts', 'images', 'watch']);
{
"name": "wordpress-starter-theme",
"version": "1.0.0",
"dependencies": {},
"devDependencies": {
"gulp": "~3.5.1",
"gulp-autoprefixer": "0.0.6",
"gulp-cache": "~0.1.1",
"gulp-concat": "~2.1.7",
"gulp-imagemin": "~0.1.4",
"gulp-jshint": "~1.3.4",
"gulp-livereload": "~0.3.2",
"gulp-load-plugins": "~0.2.0",
"gulp-minify-css": "~0.2.0",
"gulp-notify": "~0.4.0",
"gulp-rename": "~0.2.2",
"gulp-ruby-sass": "~0.3.0",
"gulp-uglify": "~0.2.0",
"tiny-lr": "0.0.5"
}
}
@joaovpmamede

This comment has been minimized.

Show comment Hide comment
@joaovpmamede

joaovpmamede Feb 26, 2014

Hi Matt, do you run gulp on your server after deploying your theme? or just send everything from the theme folder (including sass source files, etc...)?

Hi Matt, do you run gulp on your server after deploying your theme? or just send everything from the theme folder (including sass source files, etc...)?

@andrewmartin

This comment has been minimized.

Show comment Hide comment
@andrewmartin

andrewmartin Apr 15, 2014

I'm with @joavpmamede, do you have a deploy regime set up?

I'm with @joavpmamede, do you have a deploy regime set up?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment