Add script for fully building public site (#56)

* Add script for fully building public site

* lint

* PR comments

* add table to build script deps

Gulpfile.js

@@ -3,6 +3,12 @@
  */
 "use strict";
 
+// Notes about adding a new package.
+//
+// * Even if you don't have a copy task, you should add `copy: false` to run a
+//   no-op copy task. This allows other packages that depend on yours to contain
+//   a copy task without failing the gulp build.
+
 const projects = [
     {
         id: "core",
@@ -11,19 +17,24 @@ const projects = [
         sass: true,
         typescript: true,
         karma: true,
+        copy: false,
     }, {
         id: "datetime",
         cwd: "packages/datetime/",
         dependencies: ["core"],
         sass: true,
         typescript: true,
         karma: true,
+        copy: false,
     }, {
         id: "docs",
         cwd: "packages/docs/",
         dependencies: [
-            // docs typescript "depends" on all other projects, but as it uses webpack entirely,
-            // that dependency is expressed by making `webpack` tasks depend on `typescript` tasks.
+            // You must add your package to this dependency list if you have any
+            // examples in the docs.
+            "core",
+            "datetime",
+            "table",
         ],
         sass: true,
         webpack: {
@@ -50,6 +61,7 @@ const projects = [
         id: "table",
         cwd: "packages/table/",
         dependencies: ["core"],
+        copy: false,
         karma: true,
         sass: true,
         typescript: true,

circle.yml

@@ -2,7 +2,7 @@ general:
   artifacts:
     - packages/core/coverage
     - packages/datetime/coverage
-    - packages/docs
+    - packages/docs/dist
     - packages/landing/dist
     - packages/table/preview
 machine:
@@ -13,8 +13,8 @@ dependencies:
     - packages/core/node_modules
     - packages/datetime/node_modules
     - packages/docs/node_modules
-    - packages/table/node_modules
     - packages/landing/node_modules
+    - packages/table/node_modules
   # non-zero exit codes in dependencies will fail the build early
   # so these following commands will block the build and prevent tests
   post:

gulp/copy.js

@@ -7,18 +7,23 @@ module.exports = (gulp, plugins, blueprint) => {
     var mergeStream = require("merge-stream");
     var path = require("path");
 
-    blueprint.task("copy", "files", [], (project) => (
+    blueprint.task("copy", "files", [], (project) => {
+        // allow for no-op on project dependencies
+        if (project.copy === false) {
+            return;
+        }
+
         // copy options is a map of file globs to array of dest directories.
         // given: "copy": { "path/to/file.txt": {to: ["foo/bar"], base: "path"} }
         // the file at currProject/path/to/file.txt is copied to currProject/build/foo/bar/to/file.txt
-        mergeStream(Object.keys(project.copy).map((key) => {
+        return mergeStream(Object.keys(project.copy).map((key) => {
             var dests = project.copy[key].to;
             var base = project.copy[key].base || "";
             var stream = gulp.src(path.join(project.cwd, key), { base: path.join(project.cwd, base) });
             dests.forEach((dest) => {
                 stream = stream.pipe(blueprint.dest(project, dest));
             });
             return stream;
-        })).pipe(plugins.count(`${project.id}: <%= files %> copied`))
-    ));
+        })).pipe(plugins.count(`${project.id}: <%= files %> copied`));
+    });
 };

gulp/index.js

@@ -26,7 +26,16 @@ module.exports = (gulp, config) => {
          * @param paths {string[]} subdirectories
          */
         dest(project, ...paths) {
-            return gulp.dest(path.join(project.cwd, "dist", ...paths));
+            return gulp.dest(this.destPath(project, ...paths));
+        },
+
+        /**
+         * Returns a path in the default output directory, `dist/`.
+         * @param project {Object} current project
+         * @param paths {string[]} subdirectories
+         */
+        destPath(project, ...paths) {
+            return path.join(project.cwd, "dist", ...paths);
         },
 
         /**

gulp/sass.js

@@ -3,6 +3,11 @@
  */
 "use strict";
 
+const autoprefixer = require("autoprefixer");
+const postcssCopyAssets = require("postcss-copy-assets");
+const postcssImport = require("postcss-import");
+const postcssUrl = require("postcss-url");
+
 module.exports = (gulp, plugins, blueprint) => {
     const path = require("path");
     const COPYRIGHT_HEADER = require("./util/text").COPYRIGHT_HEADER;
@@ -46,10 +51,31 @@ module.exports = (gulp, plugins, blueprint) => {
             sassCompiler.on("error", plugins.sass.logError);
         }
 
+        const postcssOptions = {
+            to : blueprint.destPath(project, "dist.css"),
+        };
+        const postcssPlugins = [
+            // inline all imports
+            postcssImport(),
+            // rebase all urls due to inlining
+            postcssUrl({ url: "rebase" }),
+            // copy assets to dist folder, respecting rebase
+            postcssCopyAssets({
+                pathTransform: (_newPath, origPath) => {
+                    return path.resolve(
+                        blueprint.destPath(project),
+                        "assets",
+                        path.basename(origPath)
+                    );
+                },
+            }),
+            autoprefixer(config.autoprefixer),
+        ];
+
         return gulp.src(config.srcGlob(project, true))
             .pipe(plugins.sourcemaps.init())
             .pipe(sassCompiler)
-            .pipe(plugins.autoprefixer(config.autoprefixer))
+            .pipe(plugins.postcss(postcssPlugins, postcssOptions))
             .pipe(plugins.stripCssComments({ preserve: /^\*/ }))
             .pipe(plugins.replace(/\n{3,}/g, "\n\n"))
             // see https://github.com/floridoo/vinyl-sourcemaps-apply/issues/11#issuecomment-231220574

package.json

@@ -1,10 +1,16 @@
 {
   "name": "blueprint",
-  "version": "3.4.0",
+  "version": "1.0.0",
   "private": true,
   "description": "Omnibus project for Palantir's UI library for web applications.",
   "scripts": {
-    "bootstrap": "lerna bootstrap"
+    "bootstrap": "lerna bootstrap",
+    "build:landing": "(cd packages/landing; npm run build)",
+    "build:gulp": "NODE_ENV='\"production\"' gulp build",
+    "build:site": "npm-run-all build:gulp build:landing copy:docs copy:landing",
+    "copy:docs": "cp -r packages/docs/dist docs/docs",
+    "copy:landing": "cp -r packages/landing/dist/* docs/.",
+    "serve": "http-server docs"
   },
   "dependencies": {
     "@types/assertion-error": "1.0.30",
@@ -20,14 +26,14 @@
     "@types/react-addons-transition-group": "0.14.17",
     "@types/react-dom": "0.14.17",
     "@types/tether": "1.1.27",
+    "autoprefixer": "6.5.2",
     "better-handlebars": "github:wmeldon/better-handlebars",
     "chai": "3.5.0",
     "del": "2.2.2",
     "enzyme": "2.5.1",
     "eslint": "3.8.1",
     "eslint-config-palantir": "1.0.0",
     "gulp": "3.9.1",
-    "gulp-autoprefixer": "3.1.1",
     "gulp-bump": "2.4.0",
     "gulp-concat": "2.6.0",
     "gulp-connect": "5.0.0",
@@ -36,6 +42,7 @@
     "gulp-insert": "0.5.0",
     "gulp-less": "3.1.0",
     "gulp-load-plugins": "1.3.0",
+    "gulp-postcss": "6.2.0",
     "gulp-rename": "1.2.2",
     "gulp-replace": "0.5.4",
     "gulp-sass": "2.3.2",
@@ -46,6 +53,7 @@
     "gulp-typescript": "3.0.2",
     "gulp-util": "3.0.7",
     "highlights": "1.4.1",
+    "http-server": "0.9.0",
     "istanbul-instrumenter-loader": "0.2.0",
     "json-loader": "0.5.4",
     "karma": "1.3.0",
@@ -68,7 +76,11 @@
     "marked": "0.3.6",
     "merge-stream": "1.0.0",
     "mocha": "3.1.2",
+    "npm-run-all": "3.1.1",
     "phantomjs-prebuilt": "2.1.13",
+    "postcss-copy-assets": "0.3.0",
+    "postcss-import": "8.1.3",
+    "postcss-url": "5.1.2",
     "react": "15.3.1",
     "react-addons-test-utils": "15.3.1",
     "react-dom": "15.3.1",

packages/docs/src/docs.scss

@@ -7,8 +7,9 @@
 @import "../node_modules/@blueprint/datetime/dist/blueprint-datetime.css";
 @import "../node_modules/@blueprint/table/dist/table.css";
 
-@import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-light.css";
-@import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-dark.css";
+// TODO publish and re-enable
+// @import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-light.css";
+// @import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-dark.css";
 
 @import "styles/colors";
 @import "styles/content";