Last active
April 3, 2024 19:42
-
-
Save eristic/2b7d218d8627ff8c4d40af2c98f11605 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