Skip to content

Latest commit

 

History

History
168 lines (121 loc) · 5.37 KB

README.md

File metadata and controls

168 lines (121 loc) · 5.37 KB
Raw
webman.pro 🎉 gulp-webpack-starter

Gulp Webpack Starter

Contributions Contributors License Travis CI Gitter Chat

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

  1. Features
  2. Getting Started?
  3. Contributing
  4. 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

License

MIT License, Copyright © 2015-present, Dmytro Chumak. See LICENSE for more information.