-
-
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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' ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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