Added full JSX support to build pipeline

2026-07-24 23:04:32 -04:00 · 2016-10-10 12:35:25 +02:00
parent 3e47149fe4
commit 7b585f191a
27 changed files with 229 additions and 107 deletions
--- a/lib/tasks/assets/javascripts/build/application.js
+++ b/lib/tasks/assets/javascripts/build/application.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import gulpif from "gulp-if"
+import path from "path"
+import rev from "gulp-rev"
+import stream from "webpack-stream"
+import version from "gulp-rev-replace"
+import webpack from "webpack"
+
+/* ----------------------------------------------------------------------------
+ * Task: build application logic
+ * ------------------------------------------------------------------------- */
+
+export default (gulp, config, args) => {
+  return () => {
+    return gulp.src(`${config.assets.src}/javascripts/**/*.js`)
+
+      /* Build with webpack */
+      .pipe(
+        stream({
+          entry: "application.js",
+          output: {
+            filename: "application.js",
+            library: "Application"
+          },
+          module: {
+
+            /* Transpile ES6 to ES5 with Babel */
+            loaders: [
+              {
+                loader: "babel-loader",
+                test: /\.jsx?$/
+              }
+            ]
+          },
+          plugins: [
+
+            /* Don't emit assets that include errors */
+            new webpack.NoErrorsPlugin(),
+
+            /* Provide JSX helper */
+            new webpack.ProvidePlugin({
+              JSX: path.join(process.cwd(), `${config.lib}/providers/jsx.js`)
+            })
+          ].concat(
+
+            /* Minify sources */
+            args.optimize ? [
+              new webpack.optimize.UglifyJsPlugin({
+                compress: {
+                  warnings: false
+                }
+              })
+            ] : []),
+
+          /* Module resolver */
+          resolve: {
+            modulesDirectories: [
+              "src/assets/javascripts",
+              "node_modules"
+            ],
+            extensions: [
+              "",
+              ".js",
+              ".jsx"
+            ]
+          },
+
+          /* Webpack commandline output */
+          stats: {
+            colors: true
+          },
+
+          /* Sourcemap support */
+          devtool: args.sourcemaps ? "source-map" : ""
+        }))
+
+      /* Revisioning */
+      .pipe(gulpif(args.revision, rev()))
+      .pipe(gulpif(args.revision,
+        version({ manifest: gulp.src("manifest.json") })))
+      .pipe(gulp.dest(`${config.assets.build}/javascripts`))
+      .pipe(gulpif(args.revision,
+        rev.manifest("manifest.json", {
+          base: config.assets.build,
+          merge: true
+        })))
+      .pipe(gulpif(args.revision, gulp.dest(config.assets.build)))
+  }
+}
--- a/lib/tasks/assets/javascripts/build/modernizr.js
+++ b/lib/tasks/assets/javascripts/build/modernizr.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import concat from "gulp-concat"
+import gulpif from "gulp-if"
+import modernizr from "gulp-modernizr"
+import uglify from "gulp-uglify"
+import rev from "gulp-rev"
+import version from "gulp-rev-replace"
+
+/* ----------------------------------------------------------------------------
+ * Task: build custom modernizr
+ * ------------------------------------------------------------------------- */
+
+export default (gulp, config, args) => {
+  return () => {
+    return gulp.src(`${config.assets.build}/stylesheets/*.css`)
+
+      /* Build custom modernizr */
+      .pipe(
+        modernizr({
+          options: [
+            "addTest",                 /* Add custom tests */
+            "setClasses"               /* Add CSS classes to root tag */
+          ]
+        }))
+      .pipe(concat("modernizr.js"))
+
+      /* Minify sources */
+      .pipe(gulpif(args.optimize, uglify()))
+
+      /* Revisioning */
+      .pipe(gulpif(args.revision, rev()))
+      .pipe(gulpif(args.revision,
+        version({ manifest: gulp.src("manifest.json") })))
+      .pipe(gulp.dest(`${config.assets.build}/javascripts`))
+      .pipe(gulpif(args.revision,
+        rev.manifest("manifest.json", {
+          base: config.assets.build,
+          merge: true
+        })))
+      .pipe(gulpif(args.revision, gulp.dest(config.assets.build)))
+  }
+}