Awesome Open Source
Awesome Open Source
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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,539,835) 
Webpack (9,651) 
Template (7,569) 
Gulp (2,734) 
Yarn (1,607) 
Static Site Generator (1,549) 
Wordpress Development (616) 
Browsersync (345) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194