Gulp 4: Built-in Sourcemaps
One really cool feature on the Gulp 4 roadmap is the inclusion of native
sourcemaps. A commit roughly two weeks ago at the vinyl-fs
package makes this possible now. Instead of using the gulp-sourcemaps
package directly, you can use a flag in gulp.src. Gulp takes care of the rest:
var gulp = require('gulp');
var less = require('gulp-less');
var minify = require('gulp-minify-css');
var prefix = require('gulp-autoprefixer');
gulp.task('styles', function() {
return gulp.src('main.less', { sourcemaps: true })
.pipe(less())
.pipe(minify())
.pipe(prefix())
.pipe(gulp.dest('dist/styles'));
});gulp.dest takes care of saving those sourcemaps. So with every gulp.dest
command, you get new sourcemaps for your output.
Under the hood, Gulp still uses the gulp-sourcemaps package. It’s just a
much nicer and more direct way of addressing them. Still, your plugins have
to “understand” Sourcemaps.
Beta Installation #
At the moment, this is still in Beta. To test it, you have to have Gulp 4 installed:
npm install --save-dev git://github.com/gulpjs/gulp#4.0
Enter the node_modules/gulp/ directory, and install the current vinyl-fs
package.
npm install --save-dev git://github.com/wearefractal/vinyl-fs
You won’t have to do this anymore once Gulp 4 is public on NPM.
gulp-sourcemaps #
There might be some occasions where you still would need the old plugin. For example, you want to name your source directories to make them easier findable inside your Dev tools. For that, you still have to use the original plugin:
gulp.task('styles', function() {
return gulp.src('main.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minify())
.pipe(prefix())
.pipe(sourcemaps.write('.', { sourceRoot: 'css-source' }))
.pipe(gulp.dest('dist'));
});It is also necessary, if you want to combine it with other sourcemaps, like those generated by Browserify:
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
gulp.task('javascript', function () {
// set up the browserify instance on a task basis
var b = browserify({
entries: './entry.js',
debug: true
});
return b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js/'));
});But since it has the same codebase, you should be fine using them. This is also one of those things that Gulp 4 was constructed on: Things that have proven to be useful, if not mandatory in the past are now getting into core, but still as extractable and reusable as any part of Gulp.