Getting gulp-sourcemaps to map correctly with a series of plugins -


i have git repo multiple plugins (1 main 1 , several intended work main one). using this approach distribution, since bower doesn't provide way have more 1 plugin per git repo.

so, need minify each plugin, create sourcemap each plugin, , drop each 1 individual distribution folder corresponds git submodule, convention naming same plugin make simple. came following gulp script in 1 step, based off of answers found here.

return gulp.src(['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'], { base: './' })     .pipe(jshint())     .pipe(jshint.reporter(stylish))     .pipe(rename(function (path) {         var basename = path.basename;         var dirname = path.dirname;         if (dirname == 'helpers' || dirname == 'dialogs') {             path.basename = 'jquery.dirtyforms.' + dirname + '.' + basename;             console.log(path.basename);         }         path.dirname = path.basename;     }))     .pipe(gulp.dest(distributionfolder))     .pipe(sourcemaps.init())     .pipe(rename(function (path) {         var basename = path.basename;         var dirname = path.dirname;         if (dirname == 'helpers' || dirname == 'dialogs') {             path.basename = 'jquery.dirtyforms.' + dirname + '.' + basename;             console.log(path.basename);         }         path.dirname = path.basename;         path.extname = '.min.js';     }))     .pipe(uglify({         outsourcemap: true,         sourceroot: '/'     }))     .pipe(gulp.dest(distributionfolder))     .pipe(sourcemaps.write('.', {         includecontent: true,         sourceroot: '/'     }))     .pipe(gulp.dest(distributionfolder)); 

it want except 1 thing. sourcemap file generated each plugin includes subdirectory in path. since final destination of plugin won't include path, invalid.

in jquery.dirtyforms.min.js.map file:

{"version":3,"sources":["jquery.dirtyforms/jquery.dirtyforms.min.js"]... 

should be

{"version":3,"sources":["jquery.dirtyforms.min.js"]... 

and in jquery.dirtyforms.min.js file:

//# sourcemappingurl=../jquery.dirtyforms/jquery.dirtyforms.min.js.map 

should be

//# sourcemappingurl=jquery.dirtyforms.min.js.map 

i dug through source of gulp-sourcemaps try find option override file name, there doesn't seem one.

two possible solutions came are:

  1. do replace in each of files using regular expression
  2. generate files in distributionfolderand move them correct subfolder after generated

but both of these seem hacks. better if stream created them correctly in first place. there way make so?

i ended going second option mentioned - is, generate minified files in distributionfolder (now settings.dest) , moved them separate copy , delete tasks.

var gulp = require('gulp'),     uglify = require('gulp-uglify'),     jshint = require('gulp-jshint'),     stylish = require('jshint-stylish'),     rename = require('gulp-rename'),     sourcemaps = require('gulp-sourcemaps'),     del = require('del');  var settings = {     baseproject: 'jquery.dirtyforms',     src: ['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'],     dest: './dist/' };  // moves .js files distribution folders , creates minified version , sourcemap gulp.task('build', ['copy-minified'], function (cb) {     del([settings.dest + '*.js', settings.dest + '*.map'], cb); });  gulp.task('copy-minified', ['uglify'], function () {     return gulp.src([settings.dest + '*.js', settings.dest + '*.map'], { base: './' })         .pipe(rename(function (path) {             console.log('moving: ' + path.basename)             path.dirname = path.basename.replace(/\.min(?:\.js)?/g, '');         }))         .pipe(gulp.dest(settings.dest)); });  gulp.task('uglify', ['clean', 'test'], function () {     return gulp.src(settings.src, { base: './' })         .pipe(rename(function (path) {             var basename = path.basename;             var dirname = path.dirname;             if (dirname == 'helpers' || dirname == 'dialogs') {                 path.basename = settings.baseproject + '.' + dirname + '.' + basename;             }             path.dirname = path.basename;         }))         .pipe(gulp.dest(settings.dest))         .pipe(sourcemaps.init())         .pipe(rename(function (path) {             path.dirname = '';             path.extname = '.min.js';         }))         .pipe(uglify({             outsourcemap: true,             sourceroot: '/'         }))         .pipe(gulp.dest(settings.dest))         .pipe(sourcemaps.write('.', {             includecontent: true,             sourceroot: '/'         }))         .pipe(gulp.dest(settings.dest)); });  // tests source files (smoke test) gulp.task('test', function () {     return gulp.src(settings.src, { base: './' })         .pipe(jshint())         .pipe(jshint.reporter(stylish)); }); 

maybe there better alternative isn't such hack, worked me.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -