Gulp sass original map

Question

I need help adding a source map to the SASS compiler in the same CSS output folder. So far, I needed to install the gulp -sourcemaps module inside gulpfile.js , but could not know the success for binding sourcemaps.write to gulp.task.

Any help is much appreciated :)

 var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var bs = require('browser-sync').create(); gulp.task('browser-sync', ['sass'], function() { bs.init({ server: { baseDir: "./" }, proxy: { target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port] ws: true // enables websockets } }); }); gulp.task('sass', function() { return gulp.src('scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('assets/css')) .pipe(bs.reload({ stream: true })); }); gulp.task('watch', ['browser-sync'], function () { gulp.watch("scss/*.scss", ['sass']); gulp.watch("*.php").on('change', bs.reload); }); 

Answer 1

Try this code for gulp task 'sass':

 gulp.task('sass', function() { return gulp.src('scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('assets/css')) .pipe(bs.reload({ stream: true })); }); 

Initialize the source files first, then compile sass () after writing the sourcemap file in the same folder ('.')

Hi

Answer 2

I use this task from 5 months every day and it works great,

 const gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), plumber = require('gulp-plumber'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'); var sassSourcePath = 'YourPath/scss/**/*.scss', cssDestPath = 'YourPath/css/'; gulp.task('sass', () => { return gulp .src(sassSourcePath) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(sourcemaps.write({includeContent: false})) .pipe(sourcemaps.init({loadMaps: true})) .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(cssDestPath)); }); 

It is also recommended that you use require('gulp-csso') for the production version.

Answer 3

Complete solution for gulp-sass, map, count all files, minify:

./bareness/partial_folders/index.scss

 @import 'base/_reset'; @import 'helpers/_variables'; @import 'helpers/_mixins'; @import 'helpers/_functions'; @import 'base/_typography'; etc.. 

./gulpfile.js

 var gulp = require('gulp'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglifycss = require('gulp-uglifycss'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('styles', function(){ return gulp .src('sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(concat('styles.css')) .pipe(uglifycss({ "maxLineLen": 80, "uglyComments": true })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./build/css/')); }); gulp.task('default', function(){ gulp.watch('sass/**/*.scss', ['styles']); })