Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Compile Sass with Gulp Source maps for JavaScript too

Simon Merrick
Simon Merrick
18,891 Points

Can I make sourcemaps work after concatenation + minification?

I am working on a project where I used this course to help me setup my first automated development / build pipeline and I am trying to work out if it is possible for source maps to continue working even after minification.

I am not using sass (yet) but I am concatenating and minifying all of my js and css, using the plugins in this cource plus 'gulp-minify-css'.

1 Answer

Yes, it seems to work with the code I have:

gulpfile.js
'use strict';

var gulp   = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    sass   = require('gulp-sass'),
    maps   = require('gulp-sourcemaps');

gulp.task('concatScripts', function() {
  return gulp.src([
    'js/jquery.js',
    'js/sticky/jquery.sticky.js',
    'js/main.js'])
  .pipe(maps.init())
  .pipe(concat('app.js'))
  .pipe(maps.write('./'))
  .pipe(gulp.dest('js'));
});

gulp.task('minifyScripts', ['concatScripts'], function() {
  return gulp.src('js/app.js')
  .pipe(maps.init())
  .pipe(uglify())
  .pipe(rename('app.min.js'))
  .pipe(maps.write('./'))
  .pipe(gulp.dest('js'));
});

gulp.task('compileSass', function() {
  return gulp.src('scss/application.scss')
  .pipe(maps.init())
  .pipe(sass())
  .pipe(maps.write('./'))
  .pipe(gulp.dest('css'));
});

gulp.task('default', ['concatScripts', 'minifyScripts', 'compileSass'], function() {
  console.log("This is the default task!");
});

It also works if I have a task that both concatenates and minifies the scripts, but I think you always have to concatenate first.

Sam Brown
Sam Brown
9,796 Points

Thanks for including this Iain, the return statement was missing from the video so my sourcemaps weren't working when I ran the gulp task.

Sam Donald
Sam Donald
36,305 Points

Strangely mine only works if I do it all in one task.

I thought it might have something to do with my use of es2015 and babel, but I just ran a test with some simple scripts and It still only works if all done in the one task.

If I do it the way you ( Iain Simmons ) have it, it only maps to my concatenated script. (i.e. app.js)