Use pull request #11012 from ncoden/chore/and-js-min-sourcefiles-10999 for v6.5.0

3c5507d25 chore: add JS sourcemaps
f1bfe51d7 chore: add sourcemaps for minified files
6f0a6023a style: add some doc for minified source map
9b9ed5f3e fix: remove useless manual sourcemaps prefixing in gulp "deploy:dist" task

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/gulp/config.js b/gulp/config.js
index 8c14fb6adf391e69071030499e3d88aea13d059d..4716f81d64ab93ef4ad787621be86988df5e9910 100644 (file)
--- a/gulp/config.js
+++ b/gulp/config.js
@@ -79,7 +79,8 @@ module.exports = {
     './_build/assets/css/foundation-prototype.css.map',
     './_build/assets/css/foundation-rtl.css',
     './_build/assets/css/foundation-rtl.css.map',
-    '_build/assets/js/foundation.js'
+    '_build/assets/js/foundation.js',
+    '_build/assets/js/foundation.js.map'
   ],
 
   // Tests

diff --git a/gulp/tasks/deploy.js b/gulp/tasks/deploy.js
index f05fa5487766b238b57d919ecb1646528f553d5f..afa1c8057b3823d116865cf8c8b58b39449238d2 100644 (file)
--- a/gulp/tasks/deploy.js
+++ b/gulp/tasks/deploy.js
@@ -11,6 +11,7 @@ var sequence = require('run-sequence');
 var inquirer = require('inquirer');
 var exec = require('child_process').execSync;
 var plumber = require('gulp-plumber');
+var sourcemaps = require('gulp-sourcemaps');
 
 var CONFIG = require('../config.js');
 var CURRENT_VERSION = require('../../package.json').version;
@@ -44,28 +45,47 @@ gulp.task('deploy:version', function() {
     .pipe(gulp.dest('.'));
 });
 
-// Generates compiled CSS and JS files and puts them in the dist/ folder
+// Generates compiled CSS and JS files and sourcemaps and puts them in the dist/ folder
 gulp.task('deploy:dist', ['sass:foundation', 'javascript:foundation'], function() {
   var cssFilter = filter(['**/*.css'], { restore: true });
-  var sourcemapFilter = filter(['**/*.css.map'], { restore: true });
   var jsFilter  = filter(['**/*.js'], { restore: true });
+  var cssSourcemapFilter = filter(['**/*.css.map'], { restore: true });
+  var jsSourcemapFilter = filter(['**/*.js.map'], { restore: true });
 
-  console.log(CONFIG.DIST_FILES)
   return gulp.src(CONFIG.DIST_FILES)
     .pipe(plumber())
+
+    // --- Source maps ---
+    // * Copy sourcemaps to the dist folder
+    // This is done first to avoid collision with minified-sourcemaps.
+    .pipe(cssSourcemapFilter)
+      .pipe(gulp.dest('./dist/css'))
+      .pipe(cssSourcemapFilter.restore)
+    .pipe(jsSourcemapFilter)
+      .pipe(gulp.dest('./dist/js'))
+      .pipe(jsSourcemapFilter.restore)
+
+    // --- Source files ---
+    // * Copy source files to dist folder
+    // * Create minified files
+    // * Create minified-sourcemaps based on standard sourcemaps.
+    //   Sourcemaps are initialized before the ".min" renaming to be able retrieve
+    //   original sourcemaps from source names.
     .pipe(cssFilter)
       .pipe(gulp.dest('./dist/css'))
-      .pipe(cleancss({ compatibility: 'ie9' }))
+      .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(rename({ suffix: '.min' }))
+      .pipe(cleancss({ compatibility: 'ie9' }))
+      .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest('./dist/css'))
-    .pipe(cssFilter.restore)
-    .pipe(sourcemapFilter)
-      .pipe(gulp.dest('./dist/css'))
-    .pipe(sourcemapFilter.restore)
+      .pipe(cssFilter.restore)
+
     .pipe(jsFilter)
       .pipe(gulp.dest('./dist/js'))
-      .pipe(uglify())
+      .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(rename({ suffix: '.min' }))
+      .pipe(uglify())
+      .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest('./dist/js'));
 });
 

diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
index da41933cef7df0deac08fa02b7a0a411aeca616a..d30607908c74e1d42ee3e667e883a8d826fd785d 100644 (file)
--- a/gulp/tasks/javascript.js
+++ b/gulp/tasks/javascript.js
@@ -6,6 +6,7 @@ var rename = require('gulp-rename');
 var webpackStream = require('webpack-stream');
 var webpack2 = require('webpack');
 var named = require('vinyl-named');
+var sourcemaps = require('gulp-sourcemaps');
 
 var CONFIG = require('../config.js');
 
@@ -61,7 +62,9 @@ var webpackConfig = {
     // See https://github.com/zurb/foundation-sites/pull/10903
     // ---
     // libraryTarget: 'umd',
-  }
+  },
+  // https://github.com/shama/webpack-stream#source-maps
+  devtool: 'source-map'
 }
 
 // Core has to be dealt with slightly differently due to bootstrapping externals
@@ -70,20 +73,26 @@ var webpackConfig = {
 gulp.task('javascript:plugin-core', function() {
   return gulp.src('js/entries/plugins/foundation.core.js')
     .pipe(named())
+    .pipe(sourcemaps.init())
     .pipe(webpackStream(webpackConfig, webpack2))
+    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('_build/assets/js/plugins'));
 });
 gulp.task('javascript:plugins', ['javascript:plugin-core'], function () {
   return gulp.src(['js/entries/plugins/*.js', '!js/entries/plugins/foundation.core.js'])
     .pipe(named())
+    .pipe(sourcemaps.init())
     .pipe(webpackStream(Object.assign({}, webpackConfig, { externals: pluginsAsExternals }), webpack2))
+    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('_build/assets/js/plugins'));
 });
 
 gulp.task('javascript:foundation', ['javascript:plugins'], function() {
   return gulp.src('js/entries/foundation.js')
     .pipe(named())
+    .pipe(sourcemaps.init())
     .pipe(webpackStream(webpackConfig, webpack2))
+    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('_build/assets/js'));
 });
 //gulp.task('javascript:foundation', function() {