[WIP] Redesigning for Gulp 4 and package updates.

.browserslistrc

@@ -0,0 +1,14 @@
+# Configures browser support for Webpack and PostCSS
+# https://github.com/browserslist/browserslist
+
+last 2 version
+> 1%
+ie >= 11
+last 1 Android versions
+last 1 ChromeAndroid versions
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Safari versions
+last 2 iOS versions
+last 2 Edge versions
+last 2 Opera versions

.editorconfig

@@ -0,0 +1,16 @@
+# Configures editors.
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf

.stylelintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-wordpress",
+  "rules": {
+	"comment-empty-line-before": null,
+	"max-line-length": null,
+	"no-descending-specificity": null,
+	"no-duplicate-selectors": null,
+	"rule-empty-line-before": null,
+	"selector-list-comma-newline-after": null
+  }
+}

README.md

@@ -1,89 +1,93 @@
 # UpGulp
 
-UpGulp is our gulp module.  It contains all of the configuration, setup, and tasks for processing themes, plugins, and whatever else.
+UpGulp is our gulp module. It contains all of the configuration, setup, and tasks for processing themes, plugins, and whatever else.
 
 ## Features
 
-It's modular. Shocking, I know.  But navigating one big-butt `gulpfile.js` is a pain in the backside.  
-
-Instead, we split our gulp tasks out in the `assets/gulp/tasks` folder.  The main file `gulpfile.js` then loads up all of the configuration (which is stored in `config/gulp/config.js`), plugins, and requirements.  Then it calls each of the tasks.  Think of it as your Controller or better yet, Task Manager.
-
-It includes:
-
-- Scripts
-    - Concatentates all the scripts found in `assets/js/*.js`
-    - Renames the combined file with a `.min` suffix
-    - Minifies that file
-    - And then stores it into the configured distribution folder, default is `assets/dist/`
-    - You can name the file whatever you want via the Configuration file
-- Styles
-    - Uses [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - for debug ease
-    - Loads in both [Bourbon](https://www.npmjs.com/package/bourbon) and [Neat](https://www.npmjs.com/package/bourbon-neat)
-    - Process with [gulp-sass](https://www.npmjs.com/package/gulp-sass)
-    - Runs [postcss](https://www.npmjs.com/package/postcss)
-    - Includes [sass-rem](https://www.npmjs.com/package/sass-rem)
-    - [Autoprefix](https://github.com/postcss/autoprefixer) to ensure we get the cross-browser prefixes
-    - Includes linting using [gulp-sass-lint](https://www.npmjs.com/package/gulp-sass-lint)
-    - Copy and rename the full stylesheet with a `.min` suffix
-    - It minifies to optimize the stylesheet
-    - If this is a theme, then it moves both the `.css` and `.min.css` files to the root of the theme folder.
-- Translations
-    - i18n translations are included (NEEDS TESTING)
-- Sprites and icons optimizations
-- Imagine optimizations    
-
-### Sass Features
-
-This gulp starter has Bourbon, Neat, and Sass REM baked into it.  To use these in your `style.scss` file and project, do the following:
+It's modular. Shocking, I know. But navigating one big-butt `gulpfile.js` is a pain in the backside.
 
+UpGulp splits the traditional `gulpfile.js` into separate task files and follows the ["Splitting a gulpfile"](https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles#splitting-a-gulpfile) recommendation:
+
+>Node's module resolution allows you to replace your gulpfile.js file with a directory named gulpfile.js that contains an index.js file which is treated as a gulpfile.js. This directory could then contain your individual modules for tasks. If you are using a transpiler, name the folder and file accordingly.
+
+The traditional `gulpfile.js` file becomes a directory. Within that directory, Node resolves the `index.js` as the entry point. The new design is as follows:
+
+```text
+gulpfile.js
+    index.js    // Gulp's main file, used to import each of the task and config files and then make those tasks available to CLI.
+    config.js   // Configuration parameters for each of the tasks. This is where you customize the tasks to fit your needs.
+    styles.js   // For the styles tasks. 
+```
+
+### Styles Tasks
+
+To run the styles task, type the following command:
+
+```js
+gulp styles
 ```
-@import 'bourbon';
-@import 'neat';
+
+This command runs the following tasks:
+    - `sassToCss`: 
+        - converts [Sass into CSS](https://www.npmjs.com/package/gulp-sass)
+        - creates the [source maps](https://www.npmjs.com/package/gulp-sourcemaps) (for debugging) and embeds them at the bottom of the .css file
+        - adds cross-browser CSS support (via [Autoprefixer](https://github.com/postcss/autoprefixer))
+    - `optimizeStyles`:
+        - optimizes the style by [minifing](https://www.npmjs.com/package/cssnano)
+        - [saves the .css as a .min.css file](https://www.npmjs.com/package/gulp-rename)
+    - `lintStyles`: 
+        - validates the styles using [stylelint](gulp-stylelint)
+            - Uses the configuration from `.stylelintrc`
+            - [WordPress coding standard](https://www.npmjs.com/package/stylelint-config-wordpress) + custom rules (which you can customize)
+
+To run only the linter task (ie `lintStyles`), type the following command:
+
+```js
+gulp lintStyles
+```
+
+### Sass Rem
+
+UpGulp includes [sass-rem](https://www.npmjs.com/package/sass-rem), which provides a function and mixin to convert pixels into rems.
+
+To use this feature, import the module into your parent sass file:
+
+```sass
 @import '../../node_modules/sass-rem/rem';
 ```
 
-REM is being deprecated out of Bourbon.  Using the `sass-rem` module lets us import the functionality we want.  To convert pixels into rems, add the following into your Sass declaration:
+Then use it as follows:
+
+```sass
+@include rem( font-size, 18px );
+```
 
-`@include rem( font-size, 18px );`
+To include a pixel fallback, add this:
+
+````sass
+$rem-fallback: true;
+````
 
 You can learn more about the syntax in the [documentation](https://www.npmjs.com/package/sass-rem#scss); 
 
 ## Installation:
 
 1. Open up terminal and navigate to the theme, plugin, or proper folder.
-2. Then type: `git clone https://github.com/KnowTheCode/UpGulp.git`.  The repository is loaded into a new subfolder called UpGulp.
-3. Now it's time to move the contents of `UpGulp` folder into the root of your plugin or theme.
-    - Move `gulpfile.js`, `package.json`, `config/gulp`, and `assets/gulp`
-    - Move these resources into the root of your theme or plugin
+2. Then type: `git clone https://github.com/KnowTheCode/UpGulp.git dev`, where it will be saved into a new `dev` directory.
+3. Navigate into the `dev` directory, ie `cd dev`.
 4. Type `npm install`.  It will automatically install all of the modules specified in the `package.json` file.
-5. Change the configuration parameters in the variable `moduleSettings` as found in `config/gulp/config.js`. You will want to change:
-    - `moduleSettings.package` -> change to the package's name
-    - `moduleSettings.domain` -> change to the domain name
-    - `moduleSettings.isTheme` -> If this is a theme, then set it to `true`.
-    - `moduleSettings.i18n` -> Define the i18n parameters
+5. Open up the `gulpfile.fs/config.js` file. Customize the parameters to fit your project's needs. 
 
 ### Run it
 
 To run it, open terminal and type `gulp watch`.  There are various watchers available including:
 
-- `gulp scripts`
 - `gulp styles`
-- `gulp sprites`
-- `gulp i18n`
-- `gulp icons`
-- `gulp imagemin`
 
 ## Credit
 
-This gulp setup is inspired by [WebDev Studio's setup](https://github.com/WebDevStudios/wd_s/blob/master/Gulpfile.js).
+Messaging is copied from and/or inspired by [WPGulp](https://github.com/ahmadawais/WPGulp).
 
 ## Contributions
 
 All feedback, bug reports, and pull requests are welcome.
-
-## TODOs
-
-There are things we need to improve and test in this starter module including:
-
-- Automate the installation process
-- Test sprites and translations