[feature/builder] - replace Gulp with module loader and npm (#203)

* add webpack and some module compile settings

* updates for karma integration

* fix settings for UMD output and consuption

* remove gulp and replace tasks in npm and webpack

* add babel rc file for simplier config

* remove commented import and add map file

* fix items for task consistancy

* add flag for directory

* fix docs task

* add missing postcss

* Update yarn.lock

* Add postcss global

* Try postcss-cli

* Try adding autoprefixer

* Update .travis.yml

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "env"
+  ],
+  "plugins": [
+    "add-module-exports"
+  ]
+}

.travis.yml

@@ -15,17 +15,19 @@ cache:
   yarn: true
 
 install:
+  - yarn global add postcss-cli
+  - yarn global add autoprefixer
   - yarn install --ignore-engines
 
 jobs:
   include:
     - stage: test
       script:
         - yarn lint
-        - gulp js
+        - yarn build
         - yarn test:ci
       after_script:
-        - codeclimate-test-reporter < coverage/lcov.info  
+        - codeclimate-test-reporter < coverage/lcov.info
     - stage: npm release
       script:
         - yarn build

CONTRIBUTING.md

@@ -3,11 +3,11 @@
 You will need:
 
 - Node.js and npm
-- Gulp
+- webpack
 
 Windows users will need additional to setup build capabilities in NPM:
 From an administrative command window:
-    
+
     npm install --global --production windows-build-tools
 
 ## Getting started
@@ -23,7 +23,7 @@ From an administrative command window:
 
 ## Writing code!
 
-We use `gulp` to facilitate things like transpilation, minification, etc. so
+We use `webpack` to facilitate things like transpilation, minification, etc. so
 you can focus on writing relevant code. If there is a fix or feature you would like
 to contribute, we ask that you take the following steps:
 
@@ -41,8 +41,8 @@ to contribute, we ask that you take the following steps:
    Versioning is hard, so just use good judgement and we'll be more than happy
    to help out.
 
-   __NOTE__: There is a `gulp` task that will automate some of the versioning.
-   You can run `gulp version:{type}` where type is `patch|minor|major` to
+   __NOTE__: There is a `npm` method that will automate some of the versioning.
+   You can run `npm version {type}` where type is `patch|minor|major` to
    update `package.json` as well as add the appropriate git tag.
 
 3. Provide a thoughtful commit message and push your changes to your fork using
@@ -57,4 +57,3 @@ to contribute, we ask that you take the following steps:
 Work in progress. We are hoping to add some tests, so if you would like to help
 us get started, feel free to contact us through the Issues or open a Pull
 Request.
-

karma.conf.js

@@ -23,7 +23,8 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'src/js/*.js': 'coverage'
+      'src/js/*.js': ['webpack', 'coverage'],
+      'test/test.*.js': ['webpack']
     },
 
     coverageReporter: {

package.json

@@ -17,13 +17,20 @@
     "Chuck Carpenter <charleswcarpenter3@gmail.com>"
   ],
   "scripts": {
-    "build": "gulp build",
-    "docs": "gulp docs",
+    "build": "webpack && yarn copy-deps",
+    "clean": "rm -rf dist",
+    "copy-deps": "cp -R ./node_modules/popper.js/dist/umd/. dist/js",
+    "prebuild:css": "node-sass --source-map true ./docs/welcome/sass/*.scss -o ./docs/welcome/css",
+    "prefix:css": "postcss --use autoprefixer -b 'last 2 versions' < ./docs/welcome/css/welcome.css",
+    "docs": "yarn prebuild:css && yarn prefix:css",
     "lint:js": "eslint .",
     "lint:styles": "stylelint ./src/css/**/*.scss ./docs/welcome/sass/welcome.scss",
     "lint": "yarn lint:js && yarn lint:styles",
+    "start": "webpack-dev-server --open",
     "test:ci": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
-    "test:watch": "karma start --browsers Chrome"
+    "test:watch": "karma start --browsers Chrome",
+    "test": "mocha",
+    "watch": "webpack --watch"
   },
   "homepage": "http://shipshapecode.github.io/shepherd/docs/welcome/",
   "license": "MIT",
@@ -36,34 +43,39 @@
     "yarn": "^1.9.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.52",
-    "@babel/preset-env": "^7.0.0-beta.52",
+    "autoprefixer": "^9.1.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-env": "^1.6.1",
     "chai": "^4.1.2",
     "codeclimate-test-reporter": "^0.5.0",
+    "css-loader": "^1.0.0",
     "del": "^3.0.0",
     "eslint": "^5.1.0",
     "eslint-plugin-mocha": "^5.1.0",
     "eslint-plugin-ship-shape": "^0.6.0",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^5.0.0",
-    "gulp-babel": "^8.0.0-beta.2",
-    "gulp-bump": "^3.1.1",
-    "gulp-coffee": "^3.0.2",
-    "gulp-header": "^2.0.5",
-    "gulp-rename": "^1.3.0",
-    "gulp-sass": "^4.0.1",
-    "gulp-sequence": "^1.0.0",
-    "gulp-uglify-es": "^1.0.4",
-    "gulp-wrap-umd": "^0.2.1",
+    "glob": "^7.1.2",
     "karma": "^2.0.5",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
+    "karma-webpack": "^3.0.0",
+    "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^5.2.0",
+    "node-sass": "^4.9.2",
+    "postcss": "^7.0.2",
+    "postcss-loader": "^2.1.6",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.21.0",
     "stylelint": "^9.3.0",
-    "stylelint-config-ship-shape": "^0.4.0"
+    "stylelint-config-ship-shape": "^0.4.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
   },
   "engines": {
     "node": ">= 6.*"

postcss.config.js

@@ -0,0 +1,6 @@
+/* global module, require */
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+};