Merge pull request #53 from wwwebman/release/v2.0.0

Release/v2.0.0

Author: wwwebman

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.browserslistrc

@@ -0,0 +1,2 @@
+last 3 versions
+> 2%

.env.dist

@@ -0,0 +1,38 @@
+CLEAN_FILES_OUTSIDE_WORKING_DIR=true
+
+ROOT_DEV=./dev
+ROOT_DIST=./dist
+
+HTML_DEV=html
+HTML_DIST=./
+HTML_PARTS=templates
+HTML_RUN=true
+
+CSS_DEV=sass
+CSS_DIST=assets/css
+CSS_EXTENTIONS=*.+(css|scss)
+CSS_PURGE=false
+CSS_PURGE_WHITELIST=active,in,opened
+CSS_PURGE_CONTENT=./dev/html/**/*.html
+
+JS_DEV=js
+JS_DIST=assets/js
+
+IMAGES_DEV=images/**/
+IMAGES_DIST=assets/images
+IMAGES_EXTENTIONS=*.+(jpg|jpeg|gif|png|svg)
+
+SVG_SPRITE_DEV=images/sprite
+SVG_SPRITE_DIST=assets/sprite
+
+FONTS_DEV=fonts
+FONTS_DIST=assets/fonts
+FONTS_EXTENTIONS=*.+(woff2|woff|eot|ttf|svg)
+
+STATIC_DEV=static
+STATIC_DIST=assets/static
+
+BROWSER_SYNC_PORT=3333
+BROWSER_SYNC_TARGET=
+BROWSER_SYNC_PUBLIC_PATH=
+BROWSER_SYNC_FILES=

.env.wordpress

@@ -0,0 +1,38 @@
+CLEAN_FILES_OUTSIDE_WORKING_DIR=true
+
+ROOT_DEV=./dev
+ROOT_DIST=..
+
+HTML_DEV=html
+HTML_DIST=./
+HTML_PARTS=templates
+HTML_RUN=false
+
+CSS_DEV=sass
+CSS_DIST=assets/css
+CSS_EXTENTIONS=*.+(css|scss)
+CSS_PURGE=false
+CSS_PURGE_WHITELIST=active,in,opened
+CSS_PURGE_CONTENT=../**/*.php
+
+JS_DEV=js
+JS_DIST=assets/js
+
+IMAGES_DEV=images/**/
+IMAGES_DIST=assets/images
+IMAGES_EXTENTIONS=*.+(jpg|jpeg|gif|png|svg)
+
+SVG_SPRITE_DEV=images/sprite
+SVG_SPRITE_DIST=assets/sprite
+
+FONTS_DEV=fonts
+FONTS_DIST=assets/fonts
+FONTS_EXTENTIONS=*.+(woff2|woff|eot|ttf|svg)
+
+STATIC_DEV=static
+STATIC_DIST=assets/static
+
+BROWSER_SYNC_PORT=3333
+BROWSER_SYNC_TARGET=http://localhost/[awesome_wp_project]/
+BROWSER_SYNC_PUBLIC_PATH=http://localhost:3333/[awesome_wp_project]/wp-content/themes/[theme_folder_name]/assets/js/
+BROWSER_SYNC_FILES=*.php

.gitignore

@@ -1,4 +1,3 @@
-bower_components
 node_modules
 assets
 dist
@@ -7,3 +6,4 @@ npm-debug.log
 /*.html
 .DS_Store
 .idea
+.env

.travis.yml

@@ -1,12 +1,12 @@
 language: node_js
 node_js:
-    - "10.16.0"
+  - "10.16.0"
 before_script:
-    # starting a GUI to run tests, per https://docs.travis-ci.com/user/gui-and-headless-browsers/#Using-xvfb-to-Run-Tests-That-Require-a-GUI
-    - export DISPLAY=:99.0
-    - sh -e /etc/init.d/xvfb start
+  - cp .env.dist .env
+install:
+  - yarn install
 script:
-    - "npm run build"
+  - yarn build
 os:
-    - linux
-    - windows
+  - linux
+  - osx

CHANGELOG.md

@@ -1,135 +1,118 @@
-# Gulp Webpack Starter :octopus:
+<div align="center">
+    <img alt="styled-components" src="https://user-images.githubusercontent.com/13425833/73493741-a2eefe00-43b3-11ea-8cae-202e646582ac.png" height="150px" />
+    <br />
+    <h1>Gulp Webpack Starter</h1>
+    <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md"><img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat" alt="Contributions"></a>
+    <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md"><img src="https://img.shields.io/github/contributors/wwwebman/gulp-webpack-starter.svg" alt="Contributors"></a>
+    <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="License"></a>
+    <a href="https://travis-ci.org/wwwebman/gulp-webpack-starter"><img src="https://travis-ci.org/wwwebman/gulp-webpack-starter.svg?branch=master" alt="Travis CI"></a>
+    <a href="https://gitter.im/gulp-webpack-starter/Lobby"><img src="https://img.shields.io/gitter/room/tj/git-extras.svg?style=flat-square" alt="Gitter Chat"></a>
+</div>
 
-[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md)
-[![GitHub contributors](https://img.shields.io/github/contributors/wwwebman/gulp-webpack-starter.svg)](https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md)
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()
-[![Build Status](https://travis-ci.org/wwwebman/gulp-webpack-starter.svg?branch=master)](https://travis-ci.org/wwwebman/gulp-webpack-starter)
-[![Gitter](https://img.shields.io/gitter/room/tj/git-extras.svg?style=flat-square)](https://gitter.im/gulp-webpack-starter/Lobby)
+<br />
 
-**Gulp Webpack Starter** - A simple web-development toolkit using Gulp task runner and Webpack bundler.
-Ideal for [building static HTML templates](#dart-1-static-html-templating) 
-or [speeding up Wordpress](#eyes-2-wordpress) theme development 
-and any similar template-driven and front-end project.
+**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](#dart-1-static-html-templating) 
+or [speeding up WordPress](#eyes-2-wordpress) theme development.
 
-![Gulp Webpack Starter](http://webman.pro/assets/img/main/gulp-webpack-starter-webman.jpg)
+[Version 2](https://github.com/wwwebman/gulp-webpack-starter/releases/tag/v2.0.0) is released :tada:.
+
+**Easy to start, nice to use. Check it out! :octopus:**
+___
 
 ## List of Content
 
 1. [Features](#gift-features)
 1. [Getting Started?](#getting-started)
     * [Recommendations](#closed_book-recommendations)
     * [Static HTML templating](#dart-1-static-html-templating)
-    * [Wordpress](#eyes-2-wordpress)
-1. [Configuration](#configuration)
-1. [Changelog](https://github.com/wwwebman/gulp-webpack-starter/blob/master/CHANGELOG.md)
-1. [Contributing](https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md)
+    * [WordPress](#eyes-2-wordpress)
+1. [Contributing](./CONTRIBUTING.md)
+1. [Examples](./examples)
 
 ## :gift: Features
 
 |Features|Description|
 |------------------|-----------|
-|CSS| [SASS](http://sass-lang.com/), [SMACSS](https://smacss.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), [clean-css](https://www.npmjs.com/package/gulp-clean-css)|
+|CSS| [SASS](http://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), [gulp-purgecss](https://www.npmjs.com/package/gulp-purgecss)|
 |JS|[Webpack](https://webpack.js.org/), [Babel](http://babeljs.io/)|
-|Testing|[Jest](https://facebook.github.io/jest/)|
 |Live Reload|[BrowserSync](http://www.browsersync.io/), [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware), [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)|
 |HTML| [gulp-file-include](https://www.npmjs.com/package/gulp-file-include)|
 |Images| [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)|
 |SVG sprite| [gulp-svg-sprite](https://github.com/jkphl/gulp-svg-sprite)|
-|Deployment| [vinyl-ftp](https://www.npmjs.com/package/vinyl-ftp)|
 
 ## Getting started?
 
 ### :closed_book: Recommendations
 
-Make sure you have the following installed: 
-* [Node.js](https://nodejs.org/)
-* [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/)
-  
-**Recommended to use Node.js >= v10.16.0**.
+Make sure you have installed the following: 
+* [Node.js](https://nodejs.org/)(**Recommended to use Node.js >= v10.16.0**)
+* [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/). 
+In this tutorial we use yarn, but you can use npm. 
 
 ## :dart: 1. Static HTML templating
 
 #### Step 1 - clone
 
 ```bash
-git clone https://github.com/wwwebman/gulp-webpack-starter <my-project-name>
-cd <my-project-name>
+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`
+
 ```bash
 yarn
 yarn start
 ```
 
-**Pretty easy, right?**
-
-***
+Start files modification under `[my-static-template-project-name]/dev/*` to feel a great 
+development experience.
 
-## :eyes: 2. Wordpress
+**Cool and pretty easy, right?**
 
-#### Step 1 - Install Wordpress
+***
 
-Install Wordpress on you localhost (MAMP, LAMP)
+## :eyes: 2. WordPress
 
-#### Step 2  - Create Wordpress Theme
+### 1. Preparation
 
-`cd` into your theme directory. E.g.:
+It can be setup in a number of different ways, but we would like to describe the simplest:
 
-```bash
-  cd project/wp-content/themes/[your_theme_folder_name]
-```
+Please be sure of the following:
+ - WordPress website is available under `http://localhost/[awesome_wp_project]`
+ - WordPress Theme exists
 
-#### Step 3 - Clone starter
+Note: folder naming on different OS can differ.
 
 ```bash
-git clone https://github.com/wwwebman/gulp-webpack-starter [your_frontend_folder_name]
-cd [your_frontend_folder_name]
-```
+cd [awesome_wp_project]/wp-content/themes/[theme_folder_name]
 
-#### Step 4 - Change config
+git clone [email protected]:wwwebman/gulp-webpack-starter.git [frontend_folder_name]
 
-Edit `./tasks/config.json` file with following instruction:
+cd [frontend_folder_name]
 
-1. Change the global assets output:
-
-```json
-{
-  "root": {
-    "dist": ".." 
-  }
-}
+cp .env.wordpress .env
 ```
 
-Starting from now all compiled files will land to `themes/[your_theme_folder_name_folder]/assets`.
+### 2. Modify .env
 
-2. Disable the `html` `run` task, since we don’t need to compile HTML in Wordpress:
+##### Required
 
-```json
-{
-    "html": {
-      "run": false
-    }
-}
-```
+Set correct values to `BROWSER_SYNC_TARGET` and `BROWSER_SYNC_PUBLIC_PATH` variables.
 
-3. Now, browserSync should use proxy instead of creating a static server:
+- `BROWSER_SYNC_TARGET` - refers to WordPress website installed locally
+- `BROWSER_SYNC_PUBLIC_PATH` - refers to the relative pathname of `bundle.js` in the browser.
 
-  * `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](https://github.com/wwwebman/gulp-webpack-starter/issues/3).
-  
-```json
-{
-  "proxy": {
-    "target": "http://localhost/[your_project]",
-    "publicPath" : "http://localhost:3333/[your_project]/wp-content/themes/[your_theme_folder_name]/assets/js/"
-  }
-}
-```
+##### Not required
 
-4. Double check if you attached assets in `[your_theme_folder_name]/functions.php`:
+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`:
 
 ```php
 function enqueue_styles()
@@ -147,12 +130,10 @@ function register_scripts()
 add_action('wp_enqueue_scripts', 'register_scripts');
 ```
 
-#### Step 5 - run
-
-In `[your_theme_folder_name]/[your_frontend_folder_name]`
-
+#### 4. Run
 
 ```bash
+cd [theme_folder_name]/[frontend_folder_name]
 yarn
 yarn start
 ```
@@ -164,31 +145,11 @@ If you still have a problem, let us know by opening an [issue](https://github.co
 ## Commands
 
 ```bash
-yarn <script> // alternative: npm run <script>
-
-yarn start // Run development mode
-yarn build // Compiles your App for production
-```
-
-### Bonus
-
-You can add credentials in `./tasks/config.json` and deploy project using FTP server.
- 
- ```json
-{
-  "deploy": {
-    "hostname": "",
-    "username": "",
-    "path": "/",
-    "password": ""
-  }
-}
-```
-
-Then use the following command:
-
-```bash
-yarn deploy 
+yarn start // Runs development mode
+yarn build // Compiles assets in production mode
 ```
 
+## License
 
+MIT License, Copyright © 2015-present, [Dmytro Chumak](https://webman.pro/about).
+See [LICENSE](./LICENSE) for more information.