wpBeter automation with gulp

readme.md

Basically all this does for now is make use of browserSync so

Ideal if I can

• learn how to delete/uninstall packages. There's a LOT I don't neeed

• uninstall what I do not need

• cleanup packages.json

• currently I'm not using webpack config js file

:) gulpfile.js I'm already ok with it.

gulpfile.js

//init modules
const gulp = require('gulp');
const browserSync = require('browser-sync').create();

//settings (where paths are defined)
const settings = require('./settings');


//TASKS
//puyih: put on hold SASS, minifiers, etc. features in wpbeter, if you need it later on check your gist

function watch() {



  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
  });

  //watch for changes in php, html, css
  gulp.watch('./**/*.php').on('change', browserSync.reload);
  // gulp.watch(settings.themeLocation + '**/*.html').on('change', browserSync.reload);
  gulp.watch(settings.themeLocation + '**/*.css').on('change', browserSync.reload);

}

exports.watch = watch; //npm run gulpwatch



/*
For multiple tasks template
exports.default = series(
    parallel(scssTask, jsTask),
    cacheBustTask,
    watchTask
);

Parallel and series - new in ver 4.x to easily control whether tasks should "run together" or "in a sequence"
*/

package.json

{
  "name": "WpBeter",
  "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.5.5",
    "@babel/preset-env": "^7.5.5",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.0",
    "gulp-postcss": "^8.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^1.0.2",
    "postcss-import": "^12.0.1",
    "postcss-mixins": "^6.2.2",
    "postcss-nested": "^4.1.2",
    "postcss-simple-vars": "^5.0.2",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "normalize.css": "^8.0.1",
    "slick-carousel": "^1.8.1"
  }
}

settings.js

exports.themeLocation = './wp-content/themes/twentytwenty/';
exports.urlToPreview = 'http://migration-test.local';
// 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/mamba-academy/';
// exports.urlToPreview = 'http://mamba-academy/';


// Be SURE to update urlToPreview to YOUR domain
// Be SURE to update themeLocation to YOUR theme folder name

webpack.config.js

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'
}