Add production sourcemaps

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+## 4.1.0
+- Add `devtool`, `uglifyJsPlugin`, and `definePlugin` environment options
+- [Autoset `uglifyJsPlugin.sourceMap` to `true`](https://github.com/webpack/webpack/issues/2704#issuecomment-228860162) if `production.devtool` is defined
+- Add `publicPath` to Craft task-config.js [#432](https://github.com/vigetlabs/blendid/issues/432)
 
 ## 4.0.1
 - add watchOptions to browserSync config [#429](https://github.com/vigetlabs/blendid/pull/429)

README.md

@@ -167,10 +167,30 @@ Define additional webpack plugins that should be used in all environments
 Define additional webpack loaders that should be used in all environments. Adds to `webpackConfig.module.rules`
 
 #### `development`, `production`
-Define additional webpack plugins and loaders for development or production environments
+Specify additional environment specific configuration to be merged in with Blendid's defaults
+
+- [`devtool`](https://webpack.js.org/configuration/devtool/#devtool)
+- [`plugins`](https://webpack.js.org/concepts/plugins/)
+- [`loaders`](https://webpack.js.org/concepts/loaders/)
+
+_Production Only:_
+
+- [`uglifyJsPlugin`](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#options)
+- [`definePlugin`](https://webpack.js.org/plugins/define-plugin)
+
+Note that if `devtool` is set in production, Blendid will automatically[set to `uglifyJsPlugin.sourceMap` to `true`](https://github.com/webpack/webpack/issues/2704#issuecomment-228860162).
+
+**Example:**
 
 ```js
-development: {
+production: {
+  devtool: 'hidden-source-map',
+  uglifyJsPlugin: {
+    extractComments: true
+  },
+  definePlugin: {
+    SOME_API_KEY: 'abcdefg'
+  },
   plugins: (webpack) => { return [ new webpack.IgnorePlugin(/jsdom$/) ] },
   loaders: [] // Adds to `webpackConfig.module.rules`
 }

gulpfile.js/lib/task-defaults.js

@@ -11,6 +11,7 @@ module.exports = {
       quiet: true,
       react: false
     },
+    devtool: 'eval-cheap-module-source-map',
     babelLoader: {
       // "test" is derived from TASK_CONFIG.javascripts.extensions
       // "options" is derived from TASK_CONFIG.javascripts.babel
@@ -19,6 +20,16 @@ module.exports = {
     },
     babel: {
       presets: [["es2015", { "modules": false }], 'stage-1']
+    },
+    development: {},
+    production: {
+      devtool: false,
+      uglifyJsPlugin: {},
+      definePlugin: {
+        'process.env': {
+          'NODE_ENV': JSON.stringify('production')
+        }
+      }
     }
   },
 

gulpfile.js/lib/webpack-multi-config.js

@@ -52,7 +52,7 @@ module.exports = function (env) {
   }
 
   if (env === 'development') {
-    webpackConfig.devtool = TASK_CONFIG.javascripts.devtool || 'eval-cheap-module-source-map'
+    webpackConfig.devtool = TASK_CONFIG.javascripts.development.devtool || TASK_CONFIG.javascripts.devtool || false
     webpackConfig.output.pathinfo = true
 
     // Create new entry object with webpack-hot-middleware and react-hot-loader (if enabled)
@@ -78,13 +78,15 @@ module.exports = function (env) {
       webpackConfig.plugins.push(new webpackManifest(PATH_CONFIG.javascripts.dest, PATH_CONFIG.dest))
     }
 
+    const uglfiyConfig = TASK_CONFIG.javascripts.production.uglifyJsPlugin
+    if(TASK_CONFIG.javascripts.production.devtool) {
+      uglfiyConfig.sourceMap = true
+    }
+
+    webpackConfig.devtool = TASK_CONFIG.javascripts.production.devtool
     webpackConfig.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env': {
-          'NODE_ENV': JSON.stringify('production')
-        }
-      }),
-      new webpack.optimize.UglifyJsPlugin(),
+      new webpack.DefinePlugin(TASK_CONFIG.javascripts.production.definePlugin),
+      new webpack.optimize.UglifyJsPlugin(uglfiyConfig),
       new webpack.NoEmitOnErrorsPlugin()
     )
   }

gulpfile.js/lib/webpackManifest.js

@@ -1,18 +1,20 @@
-var path = require('path')
-var fs   = require('fs')
+const path = require('path')
+const fs   = require('fs')
 
 module.exports = function(jsDest, dest, filename) {
   filename = filename || 'rev-manifest.json'
 
   return function() {
-    this.plugin("done", function(stats) {
-      var stats    = stats.toJson()
-      var chunks   = stats.assetsByChunkName
-      var manifest = {}
+    this.plugin("done", function(statsObject) {
+      const stats    = statsObject.toJson()
+      const chunks   = stats.assetsByChunkName
+      const manifest = {}
 
-      for (var key in chunks) {
-        var originalFilename = key + '.js'
-        manifest[path.join(jsDest, originalFilename)] = path.join(jsDest, chunks[key])
+      for (let key in chunks) {
+        const originalFilename = key + '.js'
+        // https://github.com/vigetlabs/blendid/issues/232#issuecomment-171963233
+        const chunkName = typeof chunks[key] === 'string' ? chunks[key] : chunks[key][0]
+        manifest[path.join(jsDest, originalFilename)] = path.join(jsDest, chunkName)
       }
 
       fs.writeFileSync(

gulpfile.js/tasks/rev/rev-assets.js

@@ -6,7 +6,7 @@ var revNapkin = require('gulp-rev-napkin');
 // 1) Add md5 hashes to assets referenced by CSS and JS files
 gulp.task('rev-assets', function() {
   // Ignore files that may reference assets. We'll rev them next.
-  var ignoreThese = '!' + path.resolve(process.env.PWD, PATH_CONFIG.dest,'**/*+(css|js|json|html)')
+  var ignoreThese = '!' + path.resolve(process.env.PWD, PATH_CONFIG.dest,'**/*+(css|js|map|json|html)')
 
   return gulp.src([path.resolve(process.env.PWD, PATH_CONFIG.dest,'**/*'), ignoreThese])
     .pipe(rev())

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blendid",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "(formerly gulp-starter) A full featured configurable gulp asset pipeline and static site builder",
   "license": "MIT",
   "engines": {