I have recently started using Gulp as I much prefer the syntax over Grunt and whilst I like it for the most part I have noticed when using Chrome or any browser for that matter it tells me the incorrect line mappings when looking in the inspector.
It always tells me the correct file, however it incorrectly tells me the line it is on.
What I have found is it seems to have problems with the Sass nesting; in that the line number it gives me is the line for where the first parent starts, so for example in the below code:
#foo { .bar { } } If I am trying to inspect an element that has the bar class, it will tell me it's on line 1 rather than 3.
Here is my gulpfile.js file:
var gulp = require('gulp'); var concat = require('gulp-concat'); var plumber = require('gulp-plumber'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('scripts', function() { gulp.src([ 'js_dev/jquery.js', 'js_dev/plugins/*.js', // We have to set the bootstrap lines separately as some need to go before others 'js_dev/bootstrap/alert.js', 'js_dev/bootstrap/collapse.js', 'js_dev/bootstrap/modal.js', 'js_dev/bootstrap/tooltip.js', 'js_dev/bootstrap/popover.js', 'js_dev/bootstrap/tab.js', 'js_dev/bootstrap/transition.js', 'js_dev/scripts.js' ]) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(concat('scripts.js')) .pipe(sourcemaps.write('../maps')) .pipe(gulp.dest('./js')) }); gulp.task('styles', function() { gulp.src('scss/**/*.scss') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(autoprefixer({ browsers: [ 'last 4 Chrome versions', 'last 4 Firefox versions', 'last 4 Edge versions', 'last 2 Safari versions', 'ie >= 10', '> 1.49%', 'not ie <= 9' ], cascade: false })) .pipe(sourcemaps.write('../maps')) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch(['scss/**/*.scss', 'js_dev/**/*.js'], ['scripts', 'styles']); }); gulp.task('default', ['scripts', 'styles']); 
0 comments:
Post a Comment