Skip to content

Instantly share code, notes, and snippets.

@soulreverie
Forked from eristic/functions.php
Created April 15, 2020 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soulreverie/f274640b6d6fdd6d4c4d12834334ae2f to your computer and use it in GitHub Desktop.
Save soulreverie/f274640b6d6fdd6d4c4d12834334ae2f to your computer and use it in GitHub Desktop.
Gulp file for using Gulp with Underscores theme. Place in root theme directory, saved as gulpfile.js
/*
This is taken directly from here and modified to fit our needs: https://developer.wordpress.org/themes/basics/including-css-javascript/
*/
function add_that_css_and_js() {
wp_enqueue_style( 'enqueue-that-css', get_template_directory_uri() . '/css/main.css', array(), '1.0', 'all');
wp_enqueue_script( 'enqueue-that-js', get_template_directory_uri() . '/js/min/main.min.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'add_that_css_and_js' );
// If you're interested in automating more control, check out gulpjs.com for more dependencies
// This is meant as a starting point. You can do a LOT more with gulpjs than this
// Requiring dependencies here, make sure to add them via the terminal
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
minify = require('gulp-minify');
// Need to create a /css folder and a /sass folder inside the /css folder
gulp.task('build-that-css', function() {
return gulp.src('./css/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('main.css'))
.pipe(gulp.dest('css/'));
});
// Obviously enqueue this new css file "main.css" in your functions.php
gulp.task('compress-that-js', function() {
gulp.src('./js/*.js')
.pipe(minify({
ext: {
src: 'main.js', // create main.js for all your extra theme JS
min: '.min.js'
}
}))
.pipe(gulp.dest('js/min/'))
// enqueue this minified file in your functions.php file
});
// Gulp is watching you and your coding with the command: gulp watch
gulp.task('watch', function() {
gulp.watch('./css/sass/*.scss', ['build-that-css']);
gulp.watch('./js/*.js', ['compress-that-js']);
});
gulp.task('default', ['watch']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment