Easily add sass and webpack support for WordPress plugins created using https://wppb.me/.

_.md

Add Sass and Webpack Support for WordPress plugins

This is for when you use the WordPress Plugin Boilerplate generator as starter for a WordPress plugin.

This is a way to get Sass set up and have Javascript use module dependency with webpack as the module bundler.

Follow the steps below to get started.

Steps

1. Run the terminal command in create-folders-and-files.txt.

This will create the the src Javacript and Sass files as shown in the structure below.

.
├── admin
│   └── src
│       ├── js
│       │   ├── index.js
│       │   └── lib
│       │       └── component.js
│       └── scss
│           └── main.scss
└── public
    └── src
        ├── js
        │   ├── index.js
        │   └── lib
        │       └── component.js
        └── scss
            └── main.scss

2. Create the package.json file copy the package.json file located in this gist.

npm init -y

3. Create the gulpfile.js file and copy the contents from here.

touch gulpfile.js

4. Edit the const in the gulbfile from webpack(line 1) to whatever the plugin is.

5. Add the npm depenencies.

npm install

Compiling

To watch files

$ npm start

To build files for production.

$ npm run build

create-folders-and-files.txt

mkdir -p admin/src/js/lib \
&& echo "/**
 * All of the code for your admin-facing JavaScript source should 
 * reside in this file.
 * In general everything should be in a component as much as possible.
 */
import component from './lib/component';
(function( $ ) {
    'use strict';
    component();
})( jQuery );" > admin/src/js/index.js \
&& echo "export default function() {
    console.log('Admin component code output');
}" >  admin/src/js/lib/component.js \
&& mkdir -p public/src/js/lib \
&& echo "/**
 * All of the code for your public-facing JavaScript source should 
 * reside in this file.
 * In general everything should be in a component as much as possible.
 */
import component from './lib/component';
(function( $ ) {
    'use strict';
    component();
})( jQuery );" > public/src/js/index.js \
&& echo "export default function() {
    console.log('Public component code output');
}" >  public/src/js/lib/component.js \
&& mkdir -p admin/src/scss \
&& echo "/**
 * All of the CSS for your admin-facing functionality should be
 * included in this file.
 */" > admin/src/scss/main.scss \
&& mkdir -p public/src/scss \
&& echo "/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */" > public/src/scss/main.scss

gulpfile.js

const slug = 'webpack';// Change this to the plugin slug
const gulp = require("gulp")
const webpackStream = require('webpack-stream')
const rename = require('gulp-rename')
const sass = require('gulp-sass')
const del = require('del')
var argv = require('yargs').argv
var csso = require('gulp-csso')//Minify CSS with CSSO
var gulpif = require('gulp-if')
var livereload = require('gulp-livereload');

gulp.task('jsAdmin', () => {
    return gulp.src('./admin/src/js/index.js')
        .pipe(webpackStream({mode:argv.mode}))
        .pipe(rename(slug+'-admin.js'))
        .pipe(gulp.dest('admin/js/'))
        .pipe(livereload());
});

gulp.task('sassAdmin', () => {
    return gulp.src('./admin/src/scss/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(rename(slug+'-admin.css'))
        .pipe(gulp.dest('./admin/css/'))
        .pipe(livereload());
});

gulp.task('jsPublic', () => {
    return gulp.src('./public/src/js/index.js')
        .pipe(webpackStream({mode:argv.mode}))
        .pipe(rename(slug+'-public.js'))
        .pipe(gulp.dest('public/js/'))
        .pipe(livereload());
});

gulp.task('sassPublic', () => {
    return gulp.src('./public/src/scss/main.scss')
        .pipe(sass({outputStyle: 'nested',}).on('error', sass.logError))
        .pipe(rename(slug+'-public.css'))
        .pipe(gulpif(argv === 'production', csso()))
        .pipe(gulp.dest('./public/css/'))
        .pipe(livereload());
});

gulp.task('clean', () => {
    return del([
        './public/css/'+slug+'-public.css',
        './admin/css/'+slug+'-admin.css',
        './public/js/'+slug+'-public.js',
        './admin/js/'+slug+'-admin.js',        
    ]);
});

// gulp watch task that runs the above tasks in series and then watches for changes
gulp.task('watch', () => {
    gulp.watch('./public/src/scss/**/*.scss', (done) => {
        gulp.series(['sassPublic'])(done);
    });
    gulp.watch('./admin/src/scss/**/*.scss', (done) => {
        gulp.series(['sassAdmin'])(done);
    });
    gulp.watch('./public/src/js/**/*.js', (done) => {
        gulp.series(['jsPublic'])(done);
    });
    gulp.watch('./admin/src/js/**/*.js', (done) => {
        gulp.series(['jsAdmin'])(done);
    });        
});

// gulp build task that runs the above tasks in series
gulp.task('build', gulp.series(['clean', 'sassPublic', 'sassAdmin', 'jsPublic', 'jsAdmin']));

package.json

{
  "name": "webpack-plugin",
  "version": "1.0.0",
  "description": "=== Plugin Name === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://github.com/GarySwift Tags: comments, spam Requires at least: 3.0.1 Tested up to: 3.4 Stable tag: 4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "scripts": {
    "start": "gulp watch --watch --mode development",
    "build": "gulp build --mode production"
  },
  "keywords": [
    "wordpress",
    "webpack",
    "javascript"
  ],
  "author": "Gary Swift",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-csso": "^3.0.1",
    "gulp-if": "^3.0.0",
    "gulp-livereload": "^4.0.2",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "webpack-stream": "^5.2.1",
    "yargs": "^14.2.0"
  }
}

wordpress-sample-plugin.php

<?php
class SamplePlugin {
	private $sample_plugin_options;
	private $menu_slug = 'sample-plugin';

	public function __construct() {
		add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
		add_action( 'admin_init', array( $this, 'page_init' ) );
		add_action( 'admin_enqueue_scripts', array($this, 'selectively_enqueue_admin_script') );
	}

	public function add_plugin_page() {
		add_management_page(
			'Morris Toolbank', // page_title
			'Morris Toolbank', // menu_title
			'manage_options', // capability
			$this->menu_slug, // menu_slug
			array( $this, 'create_admin_page' ) // function
		);
	}

	public function create_admin_page() {
		$this->sample_plugin_options = get_option( 'sample_plugin_option_name' ); ?>

		<div class="wrap">
			<h2>Morris Toolbank Import</h2>
			<p></p>
			<?php settings_errors(); ?>

			<!-- <form method="post" action="options.php"> -->
				<?php
					settings_fields( 'sample_plugin_option_group' );
					do_settings_sections( 'morris-toolbank-admin' );
					// submit_button();
				?>
			<!-- </form> -->
		</div>
	<?php }


	/**
	 * Enqueue a script in the WordPress admin on edit.php.
	 *
	 * @param int $hook Hook suffix for the current admin page.
	 */
	public function selectively_enqueue_admin_script( $hook ) {
	    if ( 'tools_page_'.$this->menu_slug != $hook ) {
	        return;
	    }
	    wp_enqueue_style( $this->menu_slug.'-style', plugin_dir_url( __FILE__ ) . 'admin/css/webpack-admin.css' );
	    wp_enqueue_script( $this->menu_slug.'-script', plugin_dir_url( __FILE__ ) . 'admin/js/webpack-admin.js', array(), '1.0' );
	}

}
if ( is_admin() )
	$sample_plugin = new SamplePlugin();

/* 
 * Retrieve this value with:
 * $sample_plugin_options = get_option( 'sample_plugin_option_name' ); // Array of All Options
 * $file_0 = $sample_plugin_options['file_0']; // File
 */