B
B
bormor2016-08-13 17:54:38
Building projects
bormor, 2016-08-13 17:54:38

gulp. Can't add sourcemap to js. Where is the mistake?

Can't get Gulp to add sourcemap to minified script.js
Using code like this:

gulp.task('js', function() {
        return gulp.src([
                '!dev/js/polyfills/**/*.js', //полифилы, которые не надо конкатенировать
                'dev/js/libs/**/*.js',
                'dev/js/plugins/*.js',
                'dev/js/**/*.js',
            ])
            .pipe(sourcemaps.init()) 
            .pipe(concat('script.js'), { newLine: ';' })
            .pipe(uglify())
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('dist/js/'))
            .pipe(browserSync.reload({ stream: true }));
    });

What could be wrong?
How to google working examples?
What are the alternatives to this solution?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
K
Konstantin   , 2016-09-15
@bormor

Do it first uglify, then concat.
and you will be happy!
And do not forget to specify the path where to write the sourcemap: soucremap.write('./')or where you need to put it there

R
Roman Ogarkov, 2016-08-13
@ogarich89

Check out my gulpfile, it might help

'use strict';
const gulp        = require('gulp');
const browserSync = require('browser-sync').create();
const uglify      = require('gulp-uglify');
const useref      = require('gulp-useref');
const rename      = require('gulp-rename');
const browserify  = require('browserify');
const babelify    = require('babelify');
const buffer      = require('vinyl-buffer');
const source      = require('vinyl-source-stream');
const sourcemaps  = require('gulp-sourcemaps');

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], () => {

  // Serve files from the root of this project
  browserSync.init({
    proxy: "localhost"
  });

  // add browserSync.reload to the tasks array to make
  // all browsers reload after tasks are complete.
  gulp.watch("src/*.js", ['js']);
  gulp.watch("*.html").on("change", browserSync.reload);
  gulp.watch("dist/*.js").on("change", browserSync.reload);
  gulp.watch("ssi/*.shtml").on("change", browserSync.reload);
  gulp.watch("css/*.css").on("change", browserSync.reload);
});

// process JS files and return the stream.
gulp.task('js', () => {
  let bundler = browserify({
    entries: 'src/main.js',
    debug: true
  });

  bundler
  .transform(babelify, {
      presets: ['es2015'],
      compact: false,
      ignore: /libs/
  })
  .transform('browserify-shim');
  bundler.bundle()
    .on('error', err => console.error(err))
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.stream());
});
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('default', ['serve']);

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question