CODEWITHSUNDEEP
javascriptcssgulp
user3800799
user3800799

Reputation: 538

gulp sourcemap is created but not working

Styles

styles.less

@import "one.less";
@import "two.less";

one.less

body { background:red; }

two.less

body { font-size: 12px; }

Gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(less())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

result: styles.css + styles.map.css are created but the map file doesn't load when i enter the web page (and also when i inspect "body" i see styles.css)

Links
 gulp less - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps

I'm so frustrated, i'd appreciate any help. thanks.

Upvotes: 2

Views: 2067

Answers (3)

DINA TAKLIT
DINA TAKLIT

Reputation: 8418

In my case, I wrote the code between init and write but still, the map does not load in the browser

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init()) // init the source map
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(prefix('last 2 versions'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

I added loadMaps: true to sourcemaps.init() and things worked well

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init({loadMaps: true})) // init the source map 
            ...
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

Upvotes: 0

user3800799
user3800799

Reputation: 538

Okay this is what I should have used - https://github.com/radist2s/gulp-less-sourcemap

Upvotes: 0

Alcides Queiroz
Alcides Queiroz

Reputation: 9576

You're "piping" to less() before initializing the sourcemap plugin, the right way is:

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(less())//<<< between init and write
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

Upvotes: 7

Related Questions