Gulp Webpack Starter

Gulp Webpack Starter - fast and simple web development toolkit. It uses Gulp task runner and Webpack bundler. The starter perfectly fits building static HTML templates or speeding up WordPress theme development.

Version 2 is released 🎉.

Easy to start, nice to use. Check it out! 🐙

List of Content

Features
Getting Started?
Contributing
Examples

🎁 Features

Features	Description
CSS	SASS, Autoprefixer, gulp-purgecss
JS	Webpack, Babel
Live Reload	BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware
HTML	gulp-file-include
Images	gulp-imagemin
SVG sprite	gulp-svg-sprite

Getting started?

📕 Recommendations

Make sure you have installed the following:

Node.js(Recommended to use Node.js v10.16.0)
npm or yarn. In this tutorial we use yarn, but you can use npm.

🎯 1. Static HTML templating

Step 1 - clone

git clone https://github.com/wwwebman/gulp-webpack-starter [my-static-template-project-name]
cd [my-static-template-project-name]

Step 2 - run

cp .env.dist .env

yarn
yarn start

Start files modification under [my-static-template-project-name]/dev/* to feel a great development experience.

Cool and pretty easy, right?

👀 2. WordPress

1. Preparation

It can be setup in a number of different ways, but we would like to describe the simplest:

Please be sure of the following:

WordPress website is available under http://localhost/[awesome_wp_project]
WordPress Theme exists

Note: folder naming on different OS can differ.

cd [awesome_wp_project]/wp-content/themes/[theme_folder_name]

git clone [email protected]:wwwebman/gulp-webpack-starter.git [frontend_folder_name]

cd [frontend_folder_name]

cp .env.wordpress .env

2. Modify .env

Required

Set correct values to BROWSER_SYNC_TARGET and BROWSER_SYNC_PUBLIC_PATH variables.

BROWSER_SYNC_TARGET - refers to WordPress website installed locally
BROWSER_SYNC_PUBLIC_PATH - refers to the relative pathname of bundle.js in the browser.

Not required

All compiled files land to themes/[theme_folder_name_folder]/assets. Modify ROOT_DIST to change the destination.

3. Double check if assets attached in `[theme_folder_name]/functions.php`:

function enqueue_styles()
{
  wp_enqueue_style('custom', get_template_directory_uri() . '/assets/css/bundle.css', [], null);
}

add_action('wp_enqueue_scripts', 'enqueue_styles');

function register_scripts()
{
  wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/bundle.js', [], null, true);
}

add_action('wp_enqueue_scripts', 'register_scripts');

4. Run

cd [theme_folder_name]/[frontend_folder_name]
yarn
yarn start

This is cool, isn't it?

If you still have a problem, let us know by opening an issue.

Commands

yarn start // Runs development mode
yarn build // Compiles assets in production mode

wwwebman / gulp-webpack-starter Goto Github PK