feat: standardize build naming convention and add js compiled versions

wework · Mar 11, 2019 · 9c06534 · 9c06534
1 parent 9fb89e6
commit 9c06534
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 66 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -9,50 +9,56 @@ label: Guide
 
 We encourage consumers of Ray to install via npm or yarn and interface with package via the package manager.
 
+You will need also need to install the fonts, which can be done via the package or via WeWork's CDN. See instructions in the [fonts documentation](/fonts).
+
+### Package
+
 ```bash
 $ yarn add @wework/ray-core
 # or
 $ npm install --save @wework/ray-core
 ```
 
-You will need also need to install the fonts, which can be done via the package or via WeWork's CDN. See instructions in the [fonts documentation](/fonts).
-
 Ray requires both CSS and JavaScript files to be imported into your application.
-
-### CSS
-
-The styles can be imported via the built cersion of the css `@wework/ray-core/css/application.min.css`, or via importing the Sass source files:
+We encourage the use of the Sass source files as they give access to Ray variables and mixins.
 
 ```css
+/* Your Sass file */
 @import '@wework/ray-core';
 ```
 
-We encourage the use of the source files as they give access to Ray variables and mixins.
-
-### JavaScript
-
-The javascripts can be imported via:
-
-1. UMD by package `@wework/ray-core/umd`
-2. ES by package `@wework/ray-core/es`
+Javascripts:
 
 ```js
+/* Your JavaScript file */
 import { Select } from '@wework/ray-core';
+Select.create(...)
 ```
 
-3. CDN
+### CDN
+
+Ray can also be installed via CDN for rapid prototyping.
 
 ```html
-<body>
- <div class="ray-select">
- ...
- </div>
-
- <script src="https://unpkg.com/@wework/ray-core/umd/index.js"></script>
- <script>
- Ray.Core.Select.create(document.querySelector('ray-select'));
- </script>
-</body>
+<html>
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://unpkg.com/@wework/ray-core@latest/css/ray-core.min.css"
+ />
+ </head>
+
+ <body>
+ <div class="ray-select">
+ ...
+ </div>
+
+ <script src="https://unpkg.com/@wework/ray-core@latest/scripts/ray-core.min.js"></script>
+ <script>
+ Ray.Core.Select.create(document.querySelector('.ray-select'));
+ </script>
+ </body>
+</html>
 ```
 
 ## 📁 Structure
@@ -61,25 +67,28 @@ import { Select } from '@wework/ray-core';
 
 ```
 .
-├── html
-│ ├── components
-├── es
+├── es/
 │ ├── index.js
-│ ├── global
-│ ├── components
-├── umd
+│ ├── global/
+│ ├── components/
+├── umd/
 │ ├── index.js
-│ ├── global
-│ ├── components
-├── scss
-│ ├── application.scss
-│ ├── global
-│ ├── components
-├── css
-│ ├── application.css
-│ ├── application.css.map
-│ ├── application.min.css
-│ ├── application.min.css.map
+│ ├── global/
+│ ├── components/
+├── scripts/
+│ ├── ray-core.js
+│ ├── ray-core.js.map
+│ ├── ray-core.min.js
+│ ├── ray-core.min.js.map
+├── scss/
+│ ├── ray-core.scss
+│ ├── global/
+│ ├── components/
+├── css/
+│ ├── ray-core.css
+│ ├── ray-core.css.map
+│ ├── ray-core.min.css
+│ ├── ray-core.min.css.map
 ├── LICENSE
 └── README.md
 ```
diff --git a/packages/core/config/rollup.config.js b/packages/core/config/rollup.config.js
@@ -0,0 +1,30 @@
+const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('rollup-plugin-node-resolve');
+const babel = require('rollup-plugin-babel');
+const replace = require('rollup-plugin-replace');
+const babelConfig = require('../babel.config');
+
+module.exports = {
+ input: 'src/index.js',
+ output: {
+ name: 'Ray.Core',
+ file: 'scripts/ray-core.js',
+ format: 'iife',
+ sourcemap: true
+ },
+ plugins: [
+ resolve(),
+ commonjs({
+ include: 'node_modules/**',
+ sourceMap: false
+ }),
+ babel({
+ babelrc: false,
+ plugins: babelConfig.plugins,
+ presets: [['@babel/env', { modules: false }]]
+ }),
+ replace({
+ 'process.env.NODE_ENV': JSON.stringify('production')
+ })
+ ]
+};
diff --git a/packages/core/gulpfile.js b/packages/core/gulpfile.js
@@ -2,9 +2,12 @@ const gulp = require('gulp');
 const autoprefixer = require('gulp-autoprefixer');
 const sass = require('gulp-sass');
 const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
 const sourcemaps = require('gulp-sourcemaps');
 const babel = require('gulp-babel');
 const del = require('del');
+const rollup = require('rollup');
+const rollupConfig = require('./config/rollup.config');
 
 gulp.task('clean', () =>
  del([
@@ -22,7 +25,7 @@ gulp.task('clean', () =>
 gulp.task('sass:compiled', () => {
  function buildStyles(prod) {
  return gulp
- .src('src/ray.scss')
+ .src('src/ray-core.scss')
  .pipe(sourcemaps.init())
  .pipe(
  sass({
@@ -108,3 +111,24 @@ gulp.task('scripts:es', () => {
  .pipe(babel(babelOpts))
  .pipe(gulp.dest('es/'));
 });
+
+gulp.task('scripts:rollup', () => {
+ return rollup.rollup(rollupConfig).then(bundle => {
+ return bundle.write(rollupConfig.output);
+ });
+});
+
+gulp.task(
+ 'scripts:compiled',
+ gulp.series('scripts:rollup', () => {
+ const srcFile = './scripts/ray-core.js';
+
+ return gulp
+ .src(srcFile)
+ .pipe(sourcemaps.init())
+ .pipe(rename('ray-core.min.js'))
+ .pipe(uglify())
+ .pipe(sourcemaps.write('./'))
+ .pipe(gulp.dest('scripts'));
+ })
+);
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,12 +1,13 @@
 {
  "name": "@wework/ray-core",
  "version": "0.0.15",
- "main": "es/index.js",
- "style": "css/ray.min.css",
- "sass": "scss/ray.scss",
+ "main": "umd/index.js",
+ "module": "es/index.js",
+ "style": "css/ray-core.min.css",
+ "sass": "scss/ray-core.scss",
  "scripts": {
  "storybook": "start-storybook -p 6006 -s ./stories/static",
- "build": "yarn prebuild && gulp html:source sass:source sass:compiled scripts:es scripts:umd",
+ "build": "yarn prebuild && gulp html:source sass:source sass:compiled scripts:es scripts:umd scripts:compiled",
  "clean": "gulp clean",
  "prebuild": "yarn clean",
  "netlify:build": "NODE_ENV=production build-storybook -c .storybook -o ../../.out/storybook -s ./stories/static"
@@ -33,8 +34,8 @@
  "gulp-babel": "8.0.0",
  "gulp-rename": "1.4.0",
  "gulp-sass": "4.0.2",
- "gulp-sourcemaps": "2.6.4",
- "gulp-uglify": "3.0.1",
+ "gulp-sourcemaps": "2.6.5",
+ "gulp-uglify": "3.0.2",
  "gulp-util": "3.0.8",
  "lodash": "4.17.11",
  "mini-css-extract-plugin": "0.4.4",
@@ -45,6 +46,11 @@
  "react": "16.8.2",
  "react-dom": "16.7.0",
  "resolve-url-loader": "3.0.0",
+ "rollup": "1.6.0",
+ "rollup-plugin-babel": "4.3.2",
+ "rollup-plugin-commonjs": "9.2.1",
+ "rollup-plugin-node-resolve": "4.0.1",
+ "rollup-plugin-replace": "2.1.0",
  "sass-loader": "7.1.0",
  "style-loader": "0.23.1",
  "url-loader": "1.1.2",
@@ -62,5 +68,6 @@
  "src/**/*",
  "umd/**/*"
  ],
- "gitHead": "c913b9f28177833fda170ce248c8cf1f067ef3fc"
+ "gitHead": "c913b9f28177833fda170ce248c8cf1f067ef3fc",
+ "dependencies": {}
 }
diff --git a/packages/core/src/ray.scss → packages/core/src/ray-core.scss b/packages/core/src/ray.scss → packages/core/src/ray-core.scss
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
@@ -1,4 +1,4 @@
-@import '../../src/ray.scss';
+@import '../../src/ray-core.scss';
 
 .ray-color-white {
  background-color: $ray-color-white;

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -9,7 +9,7 @@ module.exports = {
  mode: process.env.NODE_ENV,
  devtool: isProduction ? 'cheap-source-map' : 'source-map',
  entry: {
- ray: resolve('./src/ray.scss')
+ ray: resolve('./src/ray-core.scss')
  },
  output: {
  path: resolve('./dist')

diff --git a/packages/docs-app/src/styles/index.scss b/packages/docs-app/src/styles/index.scss
@@ -1,4 +1,4 @@
-@import '../../../core/src/ray.scss';
+@import '../../../core/src/ray-core.scss';
 
 $font-family: 'Apercu', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
 $transition--base: 0.3s;