Gulp Webpack Starter 🐙

Gulp Webpack Starter - really simple and cool toolkit for building static HTML templates using Gulp task runner and Webpack bundler. This is professional Front End workflow, which help you to increase your development speed & quality. Also you can use our starter with Wordpress or any other similar environment.

List of Content

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

🎁 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 installed:

• Node.js
• npm installed or yarn

Recommended to use > node 8.9.1 (last TLS 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

Go to exists theme folder or create your custom theme 'customTheme'.

  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

Below an example of properties you need to be changed in tasks/config.json*.

1. Change the global assets output:

"dist": "../" 

2. Stop run html task because we don't need it in Wordpress case:

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

3. Now browserSync should use proxy instead of create static server:

• target should reffer to your wordpress aplication
• publicPath should refer to the folder which you putted bundle.js file. The Reason - issue GWS - 3

 "proxy": {
    "target": "localhost/project",
    "publicPath" : "http://localhost:3333/project/wp-content/themes/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

Contributing

Contributions, questions and comments, pull requests are all welcome.
Let's create something cool together ✋

---

Author - webman.pro