title: Getting gulp-sourcemaps to map correctly with a series of plugins
body: <p>I have a git repo with multiple plugins (1 main one and several that are only intended to work with the main one). I am using <a href="http://blog.stackfull.com/2013/05/publishing-bower-components/" rel="nofollow noreferrer">this approach</a> for distribution, since bower doesn't provide a way to have more than one plugin per git repo.</p>
  
  <p>So, I need to minify each plugin, create a sourcemap for each plugin, and drop each one into an individual distribution folder that corresponds to a git submodule, which by convention I am naming the same as the plugin to make it simple. I came up with the following Gulp script that does that all in one step, which is mostly based off of the answers I found <a href="https://stackoverflow.com/questions/24591854/using-gulp-to-concatenate-and-uglify-files">here</a>.</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>It does exactly what I want except for one thing. The sourcemap file that is generated for each plugin includes the subdirectory in the path. Since the final destination of the plugin won't include this path, this is invalid.</p>
  
  <p>In the <code>jquery.dirtyforms.min.js.map</code> file:</p>
  
  <pre><code>{"version":3,"sources":["jquery.dirtyforms/jquery.dirtyforms.min.js"]...
  </code></pre>
  
  <p>Should be</p>
  
  <pre><code>{"version":3,"sources":["jquery.dirtyforms.min.js"]...
  </code></pre>
  
  <p>And in the <code>jquery.dirtyforms.min.js</code> file:</p>
  
  <pre><code>//# sourceMappingURL=../jquery.dirtyforms/jquery.dirtyforms.min.js.map
  </code></pre>
  
  <p>Should be</p>
  
  <pre><code>//# sourceMappingURL=jquery.dirtyforms.min.js.map
  </code></pre>
  
  <p>I dug through the source of gulp-sourcemaps to try to find an option to override the file name, but there doesn't seem to be one.</p>
  
  <p>Two possible solutions I came up with for this are:</p>
  
  <ol>
  <li>Do a replace in each of the files using a regular expression</li>
  <li>Generate the files in the <code>distributionFolder</code>and then move them to the correct subfolder after they are generated</li>
  </ol>
  
  <p>But both of these seem like hacks. It would be better if the stream created them correctly in the first place. Is there a way to make that so?</p>