UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

sghoweri · 2018-08-13T01:55:58Z

Building off of the groundwork started in #915 (which needs to get merged in before this one), this PR wraps up going through the remainder of the old front-end Gulp build process for Pattern Lab's UIKit and migrates the rest of the build tasks still in use over to one single unified Webpack build.

Or to put it another way, this PR make Pattern Lab's UIKit build process faster, more tightly integrated, and a helluva lot more flexible moving forward! 🎉

High Level Changes

Wires up Pattern Lab's UIKit HTML to get built (and now minified) using Webpack's HTML Loader + the HTML Webpack Plugin
Compile's the main Pattern Lab UI Sass to CSS using the same overall collection of plugins used in Gulp, just now tightly integration to Webpack -- Node Sass (via Sass Loader), Post CSS with Autoprefixer, Clean CSS for minification, and mini-css-extract-plugin to extract and output the compiled CSS to a physical file
Cleans out everything in the buildDir directory on every build
Takes the initially compiled HTML, CSS and JavaScript assets and automatically generates / wires up the Critical CSS and helper JS needed to async load Pattern Lab's CSS in a super performant, non-render blocking way!
Sets up the groundwork for the build config itself to be customizable in the near future using cosmicconfig -- as mentioned by @bmuenzenmeyer in Consider cosmicconfig #900

…uild process!

…update inlined CSS used in iframe srcdoc to get bundled and inlined directly using Webpack

… to using Webpack -- tighter integration and easier coordination of the different steps involved in building Pattern Lab's UI

….js external task now integrated into Webpack build

bmuenzenmeyer · 2018-08-14T07:32:46Z

On to this one @sghoweri !

sghoweri · 2018-08-14T17:50:51Z

@bmuenzenmeyer I went in and updated this PR branch to pull in the latest code from the dev branch -- should be a lot easier to wrap your head around the net-new changes here!

bmuenzenmeyer · 2018-08-16T03:54:18Z

@sghoweri started reviewing this - super excited!

On first run it complained about node-sass not being found. Adding it as a devDependency and running npm run bootstrap again from the top level seemed to resolve it. Can you see if you are experiencing the same issue?

output

$ npm run build

@pattern-lab/uikit-workshop@1.0.0-alpha.7 build C:\src\patternlab-node\packages\uikit-workshop
webpack-cli --config webpack.config.js --progress

clean-webpack-plugin: C:\src\patternlab-node\packages\uikit-workshop\dist has been removed.
0% compiling(node:60120) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead Hash: 305e1df5f7b931db2c98
Version: webpack 4.16.3
Time: 20401ms
Built at: 2018-08-15 22:33:28
3 assets
Entrypoint js/patternlab-pattern = js/patternlab-pattern.js
Entrypoint js/patternlab-viewer = js/patternlab-viewer.js
Entrypoint css/pattern-lab = css/pattern-lab.js
[1] ./src/scripts/utils/index.js 799 bytes {0} {1} [built]
[3] ./src/scripts/utils/postmessage.js 3.15 KiB {0} {1} [built]
[4] ./src/scripts/utils/data-saver.js 4.75 KiB {0} {1} [built]
[5] ./src/scripts/utils/url-handler.js 6.76 KiB {0} {1} [built]
[6] ./src/scripts/utils/eventemitter.js 377 bytes {0} {1} [built]
[9] (webpack)/buildin/global.js 489 bytes {1} [built]
[15] ./src/scripts/patternlab-pattern.js 127 bytes {0} [built]
[17] ./src/scripts/patternlab-viewer.js 1.05 KiB {1} [built]
[18] (webpack)/buildin/module.js 497 bytes {1} [built]
[33] ./src/sass/pattern-lab.scss 2.02 KiB {2} [built] [failed] [1 error]
+ 24 hidden modules

ERROR in ./src/sass/pattern-lab.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.sassLoader (C:\src\patternlab-node\packages\uikit-workshop\node_modules\sass-loader\lib\loader.js:46:72)
at runLoaders (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\lib\NormalModule.js:286:20)
at C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at runSyncOrAsync (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
at iterateNormalLoaders (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
at Array. (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:202:4)
at Storage.finished (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)

at provider (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)
at C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/sas s-loader/lib/loader.js):
Error: Cannot find module 'node-sass'

v8-compile-cache.js:159 require
[uikit-workshop]/[webpack-cli]/[v8-compile -cache]/v8-compile-cache.js:159:20
Error: Cannot find module 'node-sass'
compiler.js:153 childCompiler.runAsChild
[uikit-workshop]/[html-webpack-plugin]/lib /compiler.js:153:18
Compiler.js:296 compile
[uikit-workshop]/[webpack]/lib/Compiler.js :296:11
Compiler.js:553 hooks.afterCompile.callAsy nc.err
[uikit-workshop]/[webpack]/lib/Compiler.js :553:14
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compiler.js:550 compilation.seal.err
[uikit-workshop]/[webpack]/lib/Compiler.js :550:30
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compilation.js:1284 hooks.optimizeAssets.c allAsync.err
[uikit-workshop]/[webpack]/lib/Compilation .js:1284:35
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compilation.js:1275 hooks.optimizeChunkAss ets.callAsync.err
[uikit-workshop]/[webpack]/lib/Compilation .js:1275:32
index.js:287
[uikit-workshop]/[uglifyjs-webpack-plugin] /dist/index.js:287:11
Runner.js:67 Runner.runTasks
[uikit-workshop]/[uglifyjs-webpack-plugin] /dist/uglify/Runner.js:67:9
index.js:198 UglifyJsPlugin.optimizeFn
[uikit-workshop]/[uglifyjs-webpack-plugin] /dist/index.js:198:16
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compilation.js:1270 hooks.additionalAssets .callAsync.err
[uikit-workshop]/[webpack]/lib/Compilation .js:1270:36
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compilation.js:1266 hooks.optimizeTree.cal lAsync.err
[uikit-workshop]/[webpack]/lib/Compilation .js:1266:32
Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[uikit-workshop]/[webpack]/[tapable]/lib/H ook.js:35:21
Compilation.js:1203 Compilation.seal
[uikit-workshop]/[webpack]/lib/Compilation .js:1203:27
Compiler.js:547 hooks.make.callAsync.err
[uikit-workshop]/[webpack]/lib/Compiler.js :547:17
Compilation.js:1054 _addModuleChain
[uikit-workshop]/[webpack]/lib/Compilation .js:1054:12
Compilation.js:980 processModuleDependenci es.err
[uikit-workshop]/[webpack]/lib/Compilation .js:980:9
next_tick.js:131 _combinedTickCallback
internal/process/next_tick.js:131:7
next_tick.js:180 process._tickCallback
internal/process/next_tick.js:180:9

Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/index.html 2.02 KiB {0} [built]
[1] ./src/html/partials/header.html 443 bytes {0} [built]
[2] ./src/html/partials/iframe.html 562 bytes {0} [built]
[3] ./src/html/partials/iframe-loader.html 829 bytes {0} [built]
[4] ./src/sass/pattern-lab--iframe-loader.scss 562 bytes {0} [built] [failed] [1 error]
[5] ./src/html/partials/modal.html 1.62 KiB {0} [built]
[6] ./src/html/partials/pattern-nav.html 1.55 KiB {0} [built]
[7] ./src/html/partials/controls.html 3.05 KiB {0} [built]
[8] ./src/html/partials/base-template.html 3.16 KiB {0} [built]
[9] ./src/html/partials/panel-code-template.html 156 bytes {0} [built]
+ 1 hidden module

ERROR in ./src/sass/pattern-lab--iframe-loader.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.sassLoader (C:\src\patternlab-node\packages\uikit-workshop\node_modules\sass-loader\lib\loader.js:46:72)
 @ ./src/html/partials/iframe-loader.html 1:29-82
 @ ./src/html/partials/iframe.html
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/index.html

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-oneOf-1-1!node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!node_modules/clean-css-loader/lib/index.js??ref--6-oneOf-1-3!node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-4!src/sass/pattern-lab.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/clean-css-loader/lib??ref--6-oneOf-1-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-4!./src/sass/pattern-lab.scss 562 bytes {0} [built] [failed] [1 error]

ERROR in ./src/sass/pattern-lab.scss (./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/clean-css-loader/lib??ref--6-oneOf-1-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-4!./src/sass/pattern-lab.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (C:\src\patternlab-node\packages\uikit-workshop\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.sassLoader (C:\src\patternlab-node\packages\uikit-workshop\node_modules\sass-loader\lib\loader.js:46:72)

sghoweri · 2018-08-16T11:14:02Z

@bmuenzenmeyer I must have had a cached version of node-sass in my node_modules folder or something since I started seeing that exact same error after clearing out everything and doing a fresh install / bootstrap.

Adding node-sass to the devDependencies seems to have done the trick -- should be all set!

sghoweri · 2018-08-16T11:19:32Z

Side / related question @bmuenzenmeyer -- thoughts on getting our Travis build set up to test to confirm that the UIKit folder builds successfully?

We're already doing something very similar over in the Bolt Design System codebase (testing that PL builds successfully, then using the final artifacts built to deploy branch-specific versions of the code up to Now.sh) -- could be super helpful for us here!

bmuenzenmeyer

@sghoweri this is outstanding work. Thanks so much for taking the time to build it and then also orienting it all in such an approachable reviewable way.

My one nit would be to pin the dependencies - a pattern I am trying to get into more and more after high-profile dependency dot-release problems or vulnerabilities.

bmuenzenmeyer · 2018-08-17T12:32:10Z

@sghoweri

Side / related question @bmuenzenmeyer -- thoughts on getting our Travis build set up to test to confirm that the UIKit folder builds successfully?

yes. Travis already runs lerna test which runs the test command of any package that contains it. right now only core is targeted but I'd love to get more involved, uikit-workshop, cli, development-editions, etc

We're already doing something very similar over in the Bolt Design System codebase (testing that PL builds successfully, then using the final artifacts built to deploy branch-specific versions of the code up to Now.sh) -- could be super helpful for us here!

Something like this Brad and I have had in mind for a while, a way to autodeploy the demos on release. I know we can get there when we prioritize it

sghoweri · 2018-08-17T14:05:07Z

My one nit would be to pin the dependencies - a pattern I am trying to get into more and more after high-profile dependency dot-release problems or vulnerabilities.

@bmuenzenmeyer got it - I'll keep that in mind moving forward!

…-build-to-webpack UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack

sghoweri added 6 commits August 12, 2018 21:20

chore: remove old dist folder assets no longer needed with upgraded b…

d8c41e4

…uild process!

refactor: update HTML partials to be inlined / included via Webpack; …

d0ba66f

…update inlined CSS used in iframe srcdoc to get bundled and inlined directly using Webpack

refactor: update uikit build process to move the rest of the way over…

318801a

… to using Webpack -- tighter integration and easier coordination of the different steps involved in building Pattern Lab's UI

refactor: remove Gulpfile config no longer needed

48e4375

refactor: remove package.json deps no longer needed; remove penthouse…

eda41b1

….js external task now integrated into Webpack build

chore: add freshly built assets with the new and improved Webpack build

cbe1a5a

bmuenzenmeyer self-requested a review August 14, 2018 07:32

bmuenzenmeyer self-assigned this Aug 14, 2018

sghoweri mentioned this pull request Aug 14, 2018

What’s Next for Pattern Lab’s UI? Epic Brainstorming + Next Steps #909

Open

15 tasks

Merge branch 'dev' into feature/migrate-gulp-build-to-webpack

2f83255

bmuenzenmeyer mentioned this pull request Aug 16, 2018

[uikit-workshop] Remove copy-dist flag and logic from UIKit-Workshop #919

Merged

fix: add missing node-sass dependency

643808b

bmuenzenmeyer approved these changes Aug 17, 2018

View reviewed changes

bmuenzenmeyer merged commit 72426ad into pattern-lab:dev Aug 17, 2018

mfranzke mentioned this pull request Aug 28, 2021

fix(initialize): removing no-emit-webpack-plugin dependency #1348 #1349

Merged

antonia-rose pushed a commit to quelltexterin/nemo-uikit-workshop that referenced this pull request Apr 12, 2023

Merge pull request pattern-lab#920 from sghoweri/feature/migrate-gulp…

8ade72e

…-build-to-webpack UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

Uh oh!

sghoweri commented Aug 13, 2018

Uh oh!

bmuenzenmeyer commented Aug 14, 2018

Uh oh!

sghoweri commented Aug 14, 2018

Uh oh!

bmuenzenmeyer commented Aug 16, 2018

Uh oh!

sghoweri commented Aug 16, 2018

Uh oh!

sghoweri commented Aug 16, 2018

Uh oh!

bmuenzenmeyer left a comment •

edited

Loading

Uh oh!

bmuenzenmeyer commented Aug 17, 2018

Uh oh!

sghoweri commented Aug 17, 2018 •

edited

Loading

Uh oh!

Uh oh!

UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

Uh oh!

Conversation

sghoweri commented Aug 13, 2018

High Level Changes

Uh oh!

bmuenzenmeyer commented Aug 14, 2018

Uh oh!

sghoweri commented Aug 14, 2018

Uh oh!

bmuenzenmeyer commented Aug 16, 2018

Uh oh!

sghoweri commented Aug 16, 2018

Uh oh!

sghoweri commented Aug 16, 2018

Uh oh!

bmuenzenmeyer left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer commented Aug 17, 2018

Uh oh!

sghoweri commented Aug 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

bmuenzenmeyer left a comment •

edited

Loading

sghoweri commented Aug 17, 2018 •

edited

Loading