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:
- do replace in each of files using regular expression
- generate files in
distributionfolder
and 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
Post a Comment