Skip to content

Gulp Webpack Starter - fast static website builder. The starter uses gulp toolkit and webpack bundler. Download to get an awesome development experience!

License

Notifications You must be signed in to change notification settings

wwwebman/gulp-webpack-starter

Repository files navigation

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 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 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.