caseydev / gulp-webpack-starter

Gulp Webpack Starter - fast static website builder, based on Gulp tasks and Webpack bundling

Gulp Webpack Starter 🐙

Gulp Webpack Starter - A simple web-development toolkit using Gulp task runner and Webpack bundler. Ideal for building static HTML templates, speeding up Wordpress theme development, or any similar template-driven and front-end project.

List of Content

1. Features
2. Getting Started?
   • Recommendations
   • Static templating
   • Wordpress
3. Configuration
4. Changelog
5. Contributing

🎁 Features

Features	Description
CSS	SASS, SMACSS, Autoprefixer, clean-css
JS	Webpack, Babel
Testing	Jest
Live Reload	BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware
HTML	gulp-file-include
Images	gulp-imagemin
SVG sprite	gulp-svg-sprite
Deployment	vinyl-ftp

Getting started?

📕 Recommendations

Make sure you have the following installed:

• Node.js
• npm or yarn

Recommended to use node 8.9. (last LTS version)*

🎯 Static templating

Step 1 - clone

git clone https://github.com/wwwebman/gulp-webpack-starter <my-project-name>
cd <my-project-name>

Step 2 - run

yarn
yarn start

Easy, right?

👀 Wordpress

Step 1 - install Wordpress

Install Wordpress on you localhost (MAMP, LAMP)

Step 2 - create theme

cd into your theme directory. E.g.:

  cd project/wp-content/themes/customTheme/

Step 3 - clone starter

git clone https://github.com/wwwebman/gulp-webpack-starter frontEnd
cd frontEnd

Step 4 - change config

Certain defaults will need to be changed in tasks/config.json* for WP development.

1. Change the global assets output, since we want to export assets to the theme root directory:

"dist": "../" 

2. Disable the html run task, since we don’t need to compile HTML in this project:

"html": {
  "run": false
},

3. Now, browserSync should use proxy instead of creating a static server:

• target should refer to the location (pwd) of your local WordPress installation
• publicPath should refer to the folder to which you’re outputting the bundle.js file. The Reason - issue GWS - 3

 "proxy": {
    "target": "localhost/project",
    "publicPath" : "http://localhost:3333/project/wp-content/themes/customTheme/dist/assets/js",
  }

Step 5 - run

yarn
yarn start

Commands

yarn <script> //alternative: npm run <script>
yarn start //Run development mode
yarn build //Compiles your App for production
yarn deploy //Push production version on remote server using FTP