Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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'));
@ddzwigaj

This comment has been minimized.

Copy link

ddzwigaj commented May 22, 2019

when do you use critical task?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.