Gulp 4 and WordPress Development
// Load all the modules from package.json | |
var gulp = require( 'gulp' ), | |
plumber = require( 'gulp-plumber' ), | |
autoprefixer = require('gulp-autoprefixer'), | |
watch = require( 'gulp-watch' ), | |
jshint = require( 'gulp-jshint' ), | |
stylish = require( 'jshint-stylish' ), | |
uglify = require( 'gulp-uglify' ), | |
rename = require( 'gulp-rename' ), | |
notify = require( 'gulp-notify' ), | |
include = require( 'gulp-include' ), | |
sass = require( 'gulp-sass' ), | |
browserSync = require('browser-sync').create(), | |
critical = require('critical'), | |
zip = require('gulp-zip'); | |
var config = { | |
nodeDir: './node_modules' | |
} | |
// Default error handler | |
var onError = function( err ) { | |
console.log( 'An error occured:', err.message ); | |
this.emit('end'); | |
} | |
// JS to watch | |
var jsFiles = [ | |
'./js/**/*.js', | |
'!./js/dist/*.js', | |
]; | |
// Sass files to watch | |
var cssFiles = [ | |
'./sass/**/*.scss' | |
]; | |
// automatically reloads the page when files changed | |
var browserSyncWatchFiles = [ | |
'./*.min.css', | |
'./js/**/*.min.js', | |
'./**/*.php' | |
]; | |
// see: https://www.browsersync.io/docs/options/ | |
var browserSyncOptions = { | |
watchTask: true, | |
proxy: "http://sp:8888/" | |
} | |
// Zip files up | |
gulp.task('zip', function () { | |
return gulp.src([ | |
'*', | |
'./css/*', | |
'./fonts/*', | |
'./images/**/*', | |
'./inc/**/*', | |
'./js/**/*', | |
'./languages/*', | |
'./sass/**/*', | |
'./template-parts/*', | |
'./templates/*', | |
'!bower_components', | |
'!node_modules', | |
], {base: "."}) | |
.pipe(zip('strappress.zip')) | |
.pipe(gulp.dest('.')); | |
}); | |
// Jshint outputs any kind of javascript problems you might have | |
// Only checks javascript files inside /src directory | |
gulp.task( 'jshint', function() { | |
return gulp.src( './js/src/*.js' ) | |
.pipe( jshint() ) | |
.pipe( jshint.reporter( stylish ) ) | |
.pipe( jshint.reporter( 'fail' ) ); | |
}) | |
// Concatenates all files that it finds in the manifest | |
// and creates two versions: normal and minified. | |
// It's dependent on the jshint task to succeed. | |
gulp.task( 'scripts', gulp.series('jshint'), function() { | |
return gulp.src( './js/manifest.js' ) | |
.pipe( include() ) | |
.pipe( rename( { basename: 'scripts' } ) ) | |
.pipe( gulp.dest( './js/dist' ) ) | |
// Normal done, time to create the minified javascript (scripts.min.js) | |
// remove the following 3 lines if you don't want it | |
.pipe( uglify() ) | |
.pipe( rename( { suffix: '.min' } ) ) | |
.pipe( gulp.dest( './js/dist' ) ) | |
.pipe(browserSync.reload({stream: true})) | |
.pipe( notify({ message: 'scripts task complete' })); | |
}); | |
// Sass - Creates a regular and minified .css file in root | |
gulp.task('sass', function() { | |
return gulp.src('./sass/style.scss') | |
.pipe(plumber()) | |
.pipe(sass({ | |
errLogToConsole: true, | |
precision: 8, | |
noCache: true, | |
//imagePath: 'assets/img', | |
includePaths: [ | |
config.nodeDir + '/bootstrap/scss', | |
] | |
}).on('error', sass.logError)) | |
.pipe(autoprefixer()) | |
.pipe(gulp.dest('.')) | |
.pipe(sass({ outputStyle:'compressed'}).on('error', sass.logError)) | |
.pipe(rename( { suffix: '.min' } ) ) | |
.pipe(gulp.dest('.')) | |
.pipe(browserSync.reload({stream: true})) | |
.pipe(notify({ title: 'Sass', message: 'sass task complete' })); | |
}); | |
// Generate & Inline Critical-path CSS | |
gulp.task('critical', function (cb) { | |
critical.generate({ | |
base: './', | |
src: 'http://sp:8888/', | |
dest: 'css/home.min.css', | |
ignore: ['@font-face'], | |
dimensions: [{ | |
width: 320, | |
height: 480 | |
},{ | |
width: 768, | |
height: 1024 | |
},{ | |
width: 1280, | |
height: 960 | |
}], | |
minify: true | |
}); | |
}); | |
// Starts browser-sync task for starting the server. | |
gulp.task('browser-sync', function() { | |
browserSync.init(browserSyncWatchFiles, browserSyncOptions); | |
}); | |
// Start the livereload server and watch files for change | |
gulp.task( 'watch', function() { | |
// don't listen to whole js folder, it'll create an infinite loop | |
gulp.watch( jsFiles, gulp.parallel('scripts') ) | |
gulp.watch( cssFiles, gulp.parallel('sass') ); | |
} ); | |
gulp.task( 'default', gulp.parallel('watch', 'browser-sync')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
when do you use critical task?