How to use gulp-sourcemaps - 10 common examples

const project = rushConfig.tryGetProjectForPath(packageDir);
  if (!project) {
    console.error(`Unable to find project for '${packageDir}' in 'rush.json'.`);
    throw Error();
  }

  //REVIEW: Better way to detect deployable projects?
  // Since extension .js files are deployed to 'dist//out', and libraries are deployed to
  // 'dist//node_modules//out'.
  const pathToRoot = (path.dirname(project.projectRelativeFolder) === 'extensions') ?
    '../../..' : '../../../../..';

  return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject(goodReporter()))
    .pipe(sourcemaps.mapSources((sourcePath, _file) => {
      // The source path is kind of odd, because it's relative to the `tsconfig.json` file in the
      // `typescript-config` package, which lives in the `node_modules` directory of the package
      // that is being built. It starts out as something like '../../../src/foo.ts', and we need to
      // strip out the leading '../../../'.
      return path.join('a/b/c', sourcePath);
    }))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: path.join(pathToRoot, project.projectRelativeFolder)
    }))
    .pipe(gulp.dest('out'));
}

// Log browserify errors
		.on("error", util.log.bind(util, "Browserify Error"))
		// Bundle the application
		.bundle()
		// Rename the bundled file to relativeFilename
		.pipe(source(relativeFilename))
		// Convert stream to a buffer
		.pipe(buffer())
		// Save the source map for later (uglify will remove it since it is a comment)
		.pipe(sourcemaps.init({loadMaps: true}))
		// Save normal source (useful for debugging)
		.pipe(gulp.dest(APPS_DIST_DIR))
		// Minify source for production
		.pipe(uglify())
		// Restore the sourceMap
		.pipe(sourcemaps.write())
		// Add the .min suffix before the extension
		.pipe(rename({suffix: ".min"}))
		// Log the bundle size
		.pipe(size(SIZE_OPTS))
		// Write the minified file.
		.pipe(gulp.dest(APPS_DIST_DIR));
}

qmLog.info("Not renaming minified files because we can't remove from old ones from cordova hcp server");
    }
    return gulp.src("src/" + sourceIndexFileName)
    //.pipe(useref())      // Concatenate with gulp-useref
        .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
        .pipe(jsFilter)
        .pipe(uglify({mangle: false}))             // Minify any javascript sources (Can't mangle Angular files for some reason)
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(csso())               // Minify any CSS sources
        .pipe(cssFilter.restore)
        .pipe(indexHtmlFilter)
        .pipe(ifElse(renameForCacheBusting, rev))                // Rename the concatenated files for cache busting (but not index.html)
        .pipe(indexHtmlFilter.restore)
        .pipe(ifElse(renameForCacheBusting, revReplace))         // Substitute in new filenames for cache busting
        .pipe(sourcemaps.write('.', sourceMapsWriteOptions))
        //.pipe(rev.manifest('rev-manifest.json'))
        // .pipe(through.obj(function (file, enc, cb) {
        //     console.log(file.revOrigPath); //=> /Users/.../project_manage.js
        //     console.log(file.revHash); //=> '4ad9f04399'
        //
        //     // write the NEW path
        //     file.path = modify(file.revOrigPath, function (name, ext) {
        //         return name + '_' + file.revHash + '.min' + ext;
        //     }); //=> 'project_manage_4ad9f04399.min.js
        //     console.log(file.path);
        //     // send it back to stream
        //     cb(null, file);
        // }))
        .pipe(gulp.dest('www'))
        ;
}

gulp.task('css', function(){
  // app css
  return gulp.src(cssFiles)
    .pipe(sourcemaps.init({debug:true}))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    // .pipe(plugins.concat('style.min.css'))
    .pipe(plugins.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4', 'Firefox >= 4'))
    .pipe(isProduction ? plugins.cssmin() : gutil.noop())
    .pipe(plugins.size())
    .on('error', function(err){
      new gutil.PluginError('CSS', err, {showStack: true});
    })
    .pipe(plugins.notify())
    .pipe(gulp.dest(cssDest));
});

gulp.task('scripts-typescript', 'Transpile TypeScript to ES6, include references to library and app .d.ts files and generate sourcemaps', () =>{

	// references:
	// https://www.npmjs.com/package/gulp-typescript
	let tsProject = ts.createProject('tsconfig.json', {
		typescript: require('typescript'), // override the typescript version by that defined in package.json

		// configuration defined in tsconfig.json
		// other overrides here if needed
		// http://json.schemastore.org/tsconfig
		// https://github.com/Microsoft/TypeScript/wiki/Compiler%20Options
	});

	let tsResult = utils.plumbedSrc(config.typescript.src) // handle errors nicely (i.e., without breaking watch)
		.pipe(sourcemaps.init())
		.pipe(ts(
			tsProject
		));

	// Output files
	tsResult.dts.pipe(gulp.dest(config.typescript.dest));

	return tsResult.js

		.pipe(sourcemaps.write('.', { // use '.' to write the sourcemap to a separate file in the same dir
			// sourcemaps need to be written to separate files otherwise Babel freaks out (!)
			includeContent: false, // alternative: include the contents and remove sourceRoot. Avoids issues but prevents from editing the sources directly in the browser
			sourceRoot: '/' // use an absolute path because we have scripts in different subpaths
		}))
		// Output files
		.pipe(gulp.dest(config.typescript.dest))

]
  };

  return gulp.src([
      'entrypoints/*.js',
      'src/*.js',
      'node_modules/get-own-property-symbols/build/get-own-property-symbols.max.js',
      'node_modules/promise-polyfill/src/**/*.js',
      'node_modules/@webcomponents/**/*.js',
      '!node_modules/@webcomponents/*/externs/*.js',
      '!node_modules/@webcomponents/*/node_modules/**'
    ], {base: './', follow: true})
  .pipe(sourcemaps.init())
  .pipe(closure(closureOptions))
  .pipe(sourcesContent())
  .pipe(sourcemaps.mapSources(
      // We load from node_modules, but the other polyfills are technically siblings of us.
      // Therefore, rewrite the sourcemap files to fixup the directory location
      sourcePath => sourcePath
        .replace(/node_modules\/@webcomponents/, smPrefix + '..')
        .replace(/node_modules/, smPrefix + '../..')
        .replace(/^src/, smPrefix + 'src')
  ))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(outDir));
}

if (debug) {
            bundler.on('error', function(err) {
                gutil.log(gutil.colors.red('Browserify error:'), err)
            })
        }

        var bundleStream = bundler
            .pipe(source(config.jsBundleInput))
            .pipe(ngAnnotate())

        var templateStream = gulp.src(config.views)
            .pipe(templateCache({module: config.moduleName}))

        merge2(bundleStream, templateStream)
            .pipe(buffer())
            .pipe(gulpif(!debug, sourcemaps.init()))
            .pipe(concat(config.jsBundleName))
            .pipe(gulpif(!debug, uglify()))
            .pipe(gulpif(!debug, sourcemaps.write('.')))
            .pipe(gulp.dest(config.dist))
    }

gulp.task('less', function() {
  return gulp.src('./frontend/less/*.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./static'));
});

'src/css/animate.css',
            'src/css/magnific-popup.css',
            'src/css/fonts.css',
            'src/css/responsive.css',
            'src/css/btcrelay.css'
            ])
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concat('all.css'))
        .pipe(gulp.dest('tmp'))
        .pipe(rename('all.min.css'))
        .pipe(sourcemaps.init())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({ message: 'CSS minification complete' }));
});

sFiles.map((file, key) => {
    let files = sMap[file].map(item => `${SRC.dir}/scripts/${item}`)
    gulp.src(files, SRC_OPTION)
      .pipe(sourcemaps.init())
      .pipe(concat(`scripts/${file}.js`))
      .pipe(pathTask())
      .pipe(babel({
        presets: ['env']
      }))
      .pipe(gulpif(isPROD, uglify()))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(DIST.asset))
      .pipe(connect.reload())
      .on('end', () => {
        count++
        if (count === sFiles.length) {
          done()
          log('🚀 . build script done ... ')
        }
      })
  })
})