Feature/webpack #211

bm2u · 2018-08-14T12:47:12Z

watching docs assets and src assets during development
live-reload with browser-sync
adjust webpack
usage of certain loaders and plugins

…cess does not fail

- usage of browser-sync to have live-reload - stylelint inside build - copy assets (popper.js) with CopyWebpackPlugin

- remove webpack-dev-server and use watch with browser-sync instead - install missing dependencies for webpack build

RobbieTheWagner

There is a lot changing here. I'm curious what we gain from these changes?

RobbieTheWagner · 2018-08-14T12:48:33Z

.stylelintrc.js

+  // Handle lint violations as warnings.
+  // Otherwise build fails
+  defaultSeverity: 'warning'


The build should fail for lint errors, we do not want this.

Hi @rwwagner90, feel free to remove. No need to include.

RobbieTheWagner · 2018-08-14T12:48:43Z

.editorconfig

@@ -0,0 +1,14 @@
+root = true


Why did we need this file?

Please refer to https://editorconfig.org/. In my point of view it is a good way to handle different code styles on public projects.

We enforce styles with eslint and stylelint, so we should not need this, I don't think.

RobbieTheWagner · 2018-08-14T12:49:22Z

docs/welcome/css/welcome.css

-body {
-  height: 100%;
-  overflow: hidden; }
+html,body{height:100%;overflow:hidden}body{background-color:#62c462;background-image:linear-gradient(-45deg, #62c462, #75beaa);font-family:"proxima-nova", "Helvetica Neue", sans-serif;margin:0}.button{border:2px solid #fff;color:#fff;cursor:pointer;display:inline-block;font-size:0.8em;font-weight:500;letter-spacing:3px;line-height:1.3em;padding:1em 1.25em;text-decoration:none;text-transform:uppercase;width:140px}.button.dark{background:#fff;color:#75beaa}@media (max-width: 568px){.button{display:block;margin:1em auto 0}}.hero-scroll{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;width:100%}.hero-outer{-webkit-box-sizing:border-box;box-sizing:border-box;display:table;height:100%;padding:20px 0;width:100%}.hero-outer .hero-inner{margin:0 auto 1em;text-align:center;width:540px}@media (max-width: 600px){.hero-outer .hero-inner{width:340px}}@media (max-width: 360px){.hero-outer .hero-inner{width:200px}}.hero-outer .hero-inner h1,.hero-outer .hero-inner h2,.hero-outer .hero-inner h3,.hero-outer .hero-inner p{color:#fff;font-weight:normal;line-height:1;margin:0 0 20px}.hero-outer .hero-inner h3{font-size:1.3em;padding-top:13px}.hero-outer .hero-inner h1{padding-top:10px}.hero-outer .hero-inner>*{opacity:0.3;pointer-events:none;-webkit-transition:opacity 0.4s;transition:opacity 0.4s}body:not(.shepherd-active) .hero-outer .hero-inner>*{opacity:1;pointer-events:auto}.hero-outer .hero-inner .shepherd-target.shepherd-enabled{opacity:1;pointer-events:auto}.hero-outer .hero-followup{padding-top:20px}.shepherd-element.shepherd-transparent-text .shepherd-text{color:#3b744f}.shepherd-element .shepherd-content{max-width:100%;width:400px}.shepherd-element .shepherd-content a{color:"inherit"}.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button-example-primary{background:#55a892}pre{border:1px solid rgba(0,0,0,0.15);line-height:1.4em}


What happened here? Minification?

Minification - yes. Please take a look at the sass-loader option of webpack.config.js 'outputStyle'. Use 'expanded' instead of 'compressed' to receive a human readable result.

RobbieTheWagner · 2018-08-14T12:50:09Z

docs/welcome/index.html


  <!-- Welcome docs styles -->
-  <link rel="stylesheet" href="/shepherd/docs/welcome/css/prism.css"/>


Changing these paths will not work. We need these paths for when we deploy to gh-pages.

No problem. I just thought it would be easier to understand.

# Conflicts: # package.json # yarn.lock

…file

chuckcarpenter · 2018-08-14T14:16:59Z

docs/welcome/css/welcome.css.map

@@ -1,9 +0,0 @@
-{


good cleanup, don't know who committed this file...

chuckcarpenter · 2018-08-14T14:17:25Z

package.json

@@ -17,26 +17,23 @@
    "Chuck Carpenter <charleswcarpenter3@gmail.com>"
  ],
  "scripts": {
-    "build": "webpack && yarn copy-deps",
+    "build": "yarn clean && webpack --mode production",
+    "postbuild": "rm -f dist/removable-*",
    "clean": "rm -rf dist",


hadn't you suggested a cross platform option for this?

I don't think we need anything cross platform. Everything is generally UNIX based.

Closed this PR #205 by myself. Adding Git to PATH seems to be a good solution.

chuckcarpenter · 2018-08-14T14:30:43Z

Running yarn start locally and I see those errors loading the files in. Know why that is @bm2u?

chuckcarpenter · 2018-08-14T14:50:38Z

Also, build will pass with update to .travis.yml to remove docs task

bm2u · 2018-08-14T20:17:03Z

Hi @chuckcarpenter, the reason for errors in your browser console are the static path inside index.html. I commited relative paths, but Robert requested changes on this. So I reverted this file. Please refer to Commit 08928c2

RobbieTheWagner · 2018-08-14T20:50:45Z

@bm2u something needs to be done to prefix paths only when deployed to gh-pages, I believe. Alternatively, we could make the local server's root include /shepherd, then it should work for both right?

RobbieTheWagner · 2018-08-14T21:08:02Z

@bm2u I believe we need to use a proxy for BrowserSync. I will give it a shot.

RobbieTheWagner · 2018-08-14T21:09:34Z

I'm going to merge this into a branch and continue working on it from there.

* Feature/webpack (#211) * add editorconfig for consistent coding styles * Set default severity for stylelint so that the build- and linting process does not fail * use relative paths * usage of inline maps for welcome page styles * using webpack alias to resolve popper.js * webpack config for all scss and js sources - usage of browser-sync to have live-reload - stylelint inside build - copy assets (popper.js) with CopyWebpackPlugin * adjust webpack build scripts - remove webpack-dev-server and use watch with browser-sync instead - install missing dependencies for webpack build * remove unwanted property to make build fail on lin violations * expand css output for welcome page styles * - revert index.html (need these paths for when we deploy to gh-pages) * insert final new line * enforce styles with eslint and stylelint, so we should not need this file * add routes to browserstack for local dev and testing * Update yarn.lock * Bump some deps * Set module to vanilla src version * Start splitting apart files * remove yarn docs script * add cy step and a build for the gh pages * test:ci already runs cy * Remove unnecessary global installs * Further split apart steps and tours

Winter Björn added 7 commits August 14, 2018 14:32

add editorconfig for consistent coding styles

c51ef64

Set default severity for stylelint so that the build- and linting pro…

00ace01

…cess does not fail

use relative paths

08928c2

usage of inline maps for welcome page styles

455d399

using webpack alias to resolve popper.js

4496dfa

webpack config for all scss and js sources

2966a84

- usage of browser-sync to have live-reload - stylelint inside build - copy assets (popper.js) with CopyWebpackPlugin

adjust webpack build scripts

1ff6f46

- remove webpack-dev-server and use watch with browser-sync instead - install missing dependencies for webpack build

RobbieTheWagner requested changes Aug 14, 2018

View reviewed changes

Winter Björn added 5 commits August 14, 2018 15:10

remove unwanted property to make build fail on lin violations

4ae302a

expand css output for welcome page styles

5b700c8

- revert index.html (need these paths for when we deploy to gh-pages)

78985f2

Merge branch 'master' into feature/webpack

2ceca53

# Conflicts: # package.json # yarn.lock

insert final new line

95f7f06

RobbieTheWagner requested a review from chuckcarpenter August 14, 2018 13:46

enforce styles with eslint and stylelint, so we should not need this …

33ee1bd

…file

chuckcarpenter reviewed Aug 14, 2018

View reviewed changes

docs/welcome/css/welcome.css.map

@@ -1,9 +0,0 @@

{

Copy link

Member

chuckcarpenter Aug 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good cleanup, don't know who committed this file...

chuckcarpenter reviewed Aug 14, 2018

View reviewed changes

RobbieTheWagner changed the base branch from master to feature/webpack August 14, 2018 21:09

RobbieTheWagner merged commit d788f29 into shipshapecode:feature/webpack Aug 14, 2018

bm2u deleted the feature/webpack branch August 15, 2018 19:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/webpack #211

Feature/webpack #211

bm2u commented Aug 14, 2018

RobbieTheWagner left a comment

RobbieTheWagner Aug 14, 2018

bm2u Aug 14, 2018

RobbieTheWagner Aug 14, 2018

bm2u Aug 14, 2018

RobbieTheWagner Aug 14, 2018

RobbieTheWagner Aug 14, 2018

bm2u Aug 14, 2018

RobbieTheWagner Aug 14, 2018

bm2u Aug 14, 2018

chuckcarpenter Aug 14, 2018

chuckcarpenter Aug 14, 2018

RobbieTheWagner Aug 14, 2018

bm2u Aug 14, 2018

chuckcarpenter commented Aug 14, 2018

chuckcarpenter commented Aug 14, 2018

bm2u commented Aug 14, 2018

RobbieTheWagner commented Aug 14, 2018 •

edited

Loading

RobbieTheWagner commented Aug 14, 2018

RobbieTheWagner commented Aug 14, 2018


		<!-- Welcome docs styles -->
		<link rel="stylesheet" href="/shepherd/docs/welcome/css/prism.css"/>

Feature/webpack #211

Feature/webpack #211

Conversation

bm2u commented Aug 14, 2018

RobbieTheWagner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chuckcarpenter commented Aug 14, 2018

chuckcarpenter commented Aug 14, 2018

bm2u commented Aug 14, 2018

RobbieTheWagner commented Aug 14, 2018 • edited Loading

RobbieTheWagner commented Aug 14, 2018

RobbieTheWagner commented Aug 14, 2018

RobbieTheWagner commented Aug 14, 2018 •

edited

Loading