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 :tada:.
Easy to start, nice to use. Check it out! :octopus:
List of Content
:gift: 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?
:closed_book: 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.
:dart: 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?
:eyes: 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 git@github.com: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 locallyBROWSER_SYNC_PUBLIC_PATH- refers to the relative pathname ofbundle.jsin 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
License
MIT License, Copyright © 2015-present, Dmytro Chumak.
See LICENSE for more information.