⚠️ Press f to go full-screen.

1 / 37

👋 I'm

Ahmad Awais

🥑 Open Source Developer Advocate

👓 WordPress Core Dev (Full Stack)

👨‍💻 EE-CS Engineer turned Emojineer

Rants on Twitter @MrAhmadAwais → FOSS GitHub | AhmadAwais.com | LinkedIn

2 / 37

🐦 Follow

@MrAhmadAwais

🔥 Development Hot Tips

🤣 Developer jokes/rants‚ you name it

💯 SuperCaliFragilisticExpialidocious!

MOAR: FOSS GitHub | AhmadAwais.com | LinkedIn

3 / 37

👨‍🏫 VSCode.pro

After ten years of Sublime, in 2017 I completely switched over to this new open source code editor called Visual Studio Code. I couldn't be happier.

✅ JavaScript Based Open Source Editor

🎉 I was able to contribute 👨‍💻 to VSCode

💜 Shades of purple ↣ my first code editor theme is used by over 10,000 developers in VSCode, iTerm2, Hyper, Slack, Alfred, Highlight.js, etc.

🌟 Sign up to become a VSCode Power User →

4 / 37

Dev Experience

Let's talk about you; the DEVELOPER.

👉 Your experience as a developer

👉 How can you improve your dev-workflow

👉 And developer tooling to make you better

⚠️ Press f to go full-screen

5 / 37

Dev Tooling

Developer Tooling is important if you want to love what you do and do it more often at the same time.

✅ Love what you do

✅ Do it more often

🎯 Sane automation

6 / 37

📦 create-guten-block

A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins.

👇 Downloaded 60,000+ times

👨‍💻 Used by over 15,000 developers

🐾 Over 1,000 projects depend on CGB

🌟 Star create-guten-block →

7 / 37

📦 CGB Usage

# 1. Create the block plugin.
npx create-guten-block my-block
# 2. Browse the plugin.
cd my-block
# 3. Start compiling & Watching.
npm start
# 4. Build for production.
npm run build

🌟 Star create-guten-block →

8 / 37

WHAT YOU GET

⚛️ React, JSX, and ES6 syntax support

🏗️ Dev/production build process is webpack based

👋 Beyond ES6 i.e. async/await, object spread, etc

🤖 Auto-prefixed CSS, no need for -webkit prefixes

🎒 Bundled JS, CSS, and images for production

🛠️ Hassle-free single dependency of cgb-scripts

🌟 Star create-guten-block →

9 / 37

🎯 WPGulp

An advanced & extensively documented Gulp WordPress boilerplate to help you kickstart a build-workflow for your WordPress plugins and themes.

👇 Downloaded 110,000+ times

👨‍💻 Used by over 20,000 developers

🐾 About 3,000 projects depend on it

🌟 Star WPGulp →

10 / 37

npm

npm is the node package manager.

✅ It's used for the JavaScript language

🎯 It is the default package manager for Node.js

11 / 37

Publish NPM Packages

✅ npm init -y — read the docs

🎯 npm publish — read the docs and a detailed article on how to publish your package on npm

🤖 release-it can automate GitHub tags, releases, and npm publishing. More on release-it

12 / 37

Composer

composer is a Dependency Manager.

✅ It's used for the PHP

🎯 Packagist is the main Composer repository.

13 / 37

Using Composer

🤔 Get started with Composer — read the docs

✅ composer init — read the docs

🎯 Publish packages on Packagist

🔥 Hot tip: Using composer with Teams

14 / 37

What's NEXT?

Let's build some sort of automation, RIGHT!

✅ Most devs are well versed in Gulp

✅ Many devs find webpack quite hard

💡 How about we combine Gulp and webpack

15 / 37

Gulp + webpack

Mind blown?! OK here's what we're going to do:

🎯 Combine WPGulp with create-guten-block

✅ Code modern JavaScript by using webpack

✅ Keep handling everything else with Gulp

😭 → 😫 → 😠 → 😐 → 🤔 → 🙃 → 🧐 → ❓

16 / 37

Gulp Task for webpack17 / 37

Gulp Task for webpack

Let's create a task inside of WPGulp's gulpfile.js to handle webpack JavaScript compiler.

18 / 37

1. Install Development Dependencies

# TERMINAL
# 1. Open your project root folder and run.
npm i -D webpack webpack-cli gulp-util babel-preset-cgb babel-core

19 / 37

1. Install Development Dependencies

2. Create a webpack config

# TERMINAL
# 2. Create a webpack config.
touch webpack.config.js

20 / 37

1. Install Development Dependencies

2. Create a webpack config

3. Declare Constants

// Inside gulpfile.js
// #3. Define constants.
const webpack = require( 'webpack' );
const gutil = require( 'gulp-util' );
const webpackConfig = require( './webpack.config' );

21 / 37

4. WRITE THE GULP TASK
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
    webpack( webpackConfig, ( err, stats ) => {
        if ( err ) {
            throw new gutil.PluginError( 'webpack', err );
        }
        gutil.log(
            '[webpack]',
            stats.toString({
                colors: true,
                progress: true
            })
        );
        callback();
    });
});

22 / 37

4. WRITE THE GULP TASK
4.1 'webpackJS' task
// Inside gulpfile.js
// JavaScript via webpack.
  gulp.task( 'webpackJS', callback => {
     webpack( webpackConfig, ( err, stats ) => {
         if ( err ) {
             throw new gutil.PluginError( 'webpack', err );
         }
         gutil.log(
             '[webpack]',
             stats.toString({
                 colors: true,
                 progress: true
             })
         );
         callback();
     });
  });

23 / 37

4. WRITE THE GULP TASK
4.1 'webpackJS' task
4.2 webpack compiler
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
     webpack( webpackConfig, ( err, stats ) => {
         if ( err ) {
             throw new gutil.PluginError( 'webpack', err );
         }
         gutil.log(
             '[webpack]',
             stats.toString({
                 colors: true,
                 progress: true
             })
         );
         callback();
     });
});

24 / 37

4. WRITE THE GULP TASK
4.1 'webpackJS' task
4.2 webpack compiler
4.3 Error handling
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
    webpack( webpackConfig, ( err, stats ) => {
         if ( err ) {
             throw new gutil.PluginError( 'webpack', err );
         }
        gutil.log(
            '[webpack]',
            stats.toString({
                colors: true,
                progress: true
            })
        );
        callback();
    });
});

25 / 37

4. WRITE THE GULP TASK
4.1 'webpackJS' task
4.2 webpack compiler
4.3 Error handling
4.3 webpack log
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
    webpack( webpackConfig, ( err, stats ) => {
        if ( err ) {
            throw new gutil.PluginError( 'webpack', err );
        }
         gutil.log(
             '[webpack]',
             stats.toString({
                 colors: true,
                 progress: true
             })
         );
        callback();
    });
});

26 / 37

Configuration file for webpack27 / 37

Configuration file for webpack

👀 Copy paste the webpack config of cgb-scripts to our webpack.config.js file.

28 / 37

Configuration file for webpack

👀 Copy paste the webpack config of cgb-scripts to our webpack.config.js file.

✅ Trim anything that doesn't handle JavaScript from our webpack.config.js file

29 / 37

Configuration file for webpack

👀 Copy paste the webpack config of cgb-scripts to our webpack.config.js file.

✅ Trim anything that doesn't handle JavaScript from our webpack.config.js file

✅ Update the paths and we're good to go

30 / 37

Configuration file for webpack

👀 Copy paste the webpack config of cgb-scripts to our webpack.config.js file.

✅ Trim anything that doesn't handle JavaScript from our webpack.config.js file

✅ Update the paths and we're good to go

😎 Let's have a look

31 / 37

1. Update Paths

Add paths by looking at the paths file.

// FILE: webpack.config.js
const fs = require( 'fs' );
const path = require( 'path' );
  // Make sure any symlinks in the project folder are resolved:
  const theDir = fs.realpathSync( process.cwd() );
  const resolvePath = relPath => path.resolve( theDir, relPath );

32 / 37

1. Update Paths

2. Add the Mode

// FILE: webpack.config.js
// …
// Export configuration.
module.exports = {
     mode: 'development',
    devtool: 'source-map',

33 / 37

1. Update Paths
2. Add The Mode
3. Update Entry/Output
// FILE: webpack.config.js
// …
// Export configuration.
module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
         'main.min': './assets/js/src/index.js' // 'name' : 'path/file.ext'.
    },
    output: {
        pathinfo: true,
         path: resolvePath( './assets/js/build/' ), // The dist folder.
        filename: '[name].js' // [name] = './assets/js/index.build' as defined above.
    },

34 / 37

1. Update Paths

2. Add The Mode

3. Update Entry/Output

4. Add New Externals

// FILE: webpack.config.js
// …
// Add externals.
externals: {
     wpObj: 'wpObj',
     gtag: 'gtag',
     Intercom: 'Intercom',
     jquery: 'jQuery'
}

35 / 37

Gulp + webpack

Mind blown?! Here's what we've accomplished:

🎯 JavaScript is being handled by webpack

✅ Everything else is still being handled by WPGulp

✅ We can now use modern JavaScript features, npm Modules, async/await, Object/Array spreads, etc.

🤔 → 🙃 → 🧐 → 🤞 → 🤫 → 😁 → 🤗

36 / 37

Questions?!

Follow Ahmad on Twitter @MrAhmadAwais →

FOSS GitHub | AhmadAwais.com | LinkedIn

37 / 37

Help

Keyboard shortcuts

↑, ←, Pg Up, k

Go to previous slide

↓, →, Pg Dn, Space, j

Go to next slide

Home

Go to first slide

End

Go to last slide

Number + Return

Go to specific slide

b / m / f

Toggle blackout / mirrored / fullscreen mode

Clone slideshow

Toggle presenter mode

Restart the presentation timer

?, h

Toggle this help