Gulp settings snippet for WordPress Specifically or can be use also for Fron End Development
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', ['waitForStyles']);
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], ['waitForScripts']);
});
gulp.task('waitForStyles', ['styles'], function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
});
gulp.task('waitForScripts', ['scripts'], function() {
browserSync.reload();
});
{
"name": "fictional-university-lwc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"gulpwatch": "gulp watch",
"gulpstyles": "gulp styles",
"gulpscripts": "gulp scripts"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "7.0.0-beta.46",
"@babel/preset-env": "7.0.0-beta.46",
"autoprefixer": "8.4.1",
"babel-loader": "^8.0.0-beta",
"browser-sync": "2.24.4",
"gulp": "3.9.1",
"gulp-postcss": "7.0.1",
"postcss-color-function": "4.0.1",
"postcss-hexrgba": "1.0.1",
"postcss-import": "11.1.0",
"postcss-mixins": "6.2.0",
"postcss-nested": "3.0.0",
"postcss-simple-vars": "4.1.0",
"webpack": "4.8.2"
},
"dependencies": {
"jquery": "3.3.1",
"normalize.css": "8.0.0",
"slick-carousel": "1.8.1"
}
}
exports.themeLocation = './app/wp-content/themes/fictional-university-theme/';
exports.urlToPreview = 'http://fictional-university.test';
// If you're using Local by Flywheel you will
// want your settings to be similar to the examples below:
// exports.themeLocation = './public/wp-content/themes/fictional-university-theme/';
// exports.urlToPreview = 'http://fictional-university.local/';
// Simply remove the two slashes at the front of those lines
// to uncomment them and then delete lines #1 and #2.
// Be SURE to update urlToPreview to YOUR domain and not mine.
// Be SURE to update themeLocation to YOUR theme folder name
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
App: settings.themeLocation + "js/scripts.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}