Wordpress and Gulp

Leonardo Faria

Leonardo

  • 🇧🇷
  • Developer @ Dynamic Leap
  • www.leonardofaria.net
  • @leozera

Wordpress

  • 25% of the Web
  • Themes and plugins
  • Easy for beginners and huge community

Gulp

  • Compiling Less/Sass to CSS
  • Bundling and minifying libraries and stylesheets
  • Refreshing your browser when you save a file
  • Copying files to an output directory
  • And much more!

  var gulp = require('gulp'),
      sass = require('gulp-sass')
;

  gulp.task('css', function(){
    return gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./public/css'));
  });
          

  browserSync = require('browser-sync').create(),

  gulp.task('serve', function() {
    browserSync.init({
      proxy: "http://mylocalserver"
    });
  });
          

  gulp.task('watch', function() {
    gulp.watch('./src/**/*.scss', ['css', browserSync.reload]);

  });
          

  gulp.task('default', ['serve', 'watch']);

Wordpress + Gulp example

Wordpress + Gulp example

  • Watch for theme files changes
    • Generate final CSS/JS files
    • Refresh browser
  • Sync wp-content folder
     
  • bit.ly/wp-gulp

Questions?

Thank you

😃