Skip to content

Instantly share code, notes, and snippets.

@luis-pt
Last active January 2, 2024 16:17
Show Gist options
  • Select an option

  • Save luis-pt/ba37d115defa1cd4ad061cf2ceb2d85f to your computer and use it in GitHub Desktop.

Select an option

Save luis-pt/ba37d115defa1cd4ad061cf2ceb2d85f to your computer and use it in GitHub Desktop.
Gulp to compile & minify js, scss, and live reload
// 1.
// INSTALL
// npm init
// npm install --save-dev node-sass
// npm install --save-dev gulp-uglify
// npm install --save-dev browser-sync
// npm install gulp
// 1.1
// chage url in proxy: 'theme.local'
// 2.
// ACTIVATE
// npx gulp
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();
//
// compile sass
//
gulp.task('sass', function () {
return gulp.src('theme/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('theme/css'));
});
//
// compile js
//
gulp.task('scripts', function () {
return gulp.src('theme/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('theme/js/min'));
});
//
// live reload
//
gulp.task('browser-sync', function () {
browserSync.init({
proxy: 'http://theme.local', // Update with the local URL of your WordPress site
port: 3000, // Choose a port for BrowserSync
open: false,
});
gulp.watch('theme/sass/**/*.scss', gulp.series('sass')).on('change', browserSync.reload);
gulp.watch('theme/js/*.js', gulp.series('scripts')).on('change', browserSync.reload);
gulp.watch('theme/**/*.php').on('change', browserSync.reload);
});
//
// RUN!!!
//
gulp.task('watch', gulp.series('sass', 'scripts', 'browser-sync'));
gulp.task('default', gulp.series('watch'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment