I am working on a gulp workflow, and have just piped gulp-sourcemaps
to my pipeline. However it id not creating a sourmapfile as it should. I freely admint that the i am confused by the folder destination parameter. I would like the sourcemap to be in the same folder as my css file, unless there is good reason for not doing that.
package.json
{
"name": "gulp-intro",
"version": "1.0.0",
"description": "Simple Gulp introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-rename": "^1.2.3",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
}
}
Gulpfile.js
/**
* = Gulp specific dependencies
*/
const gulp = require('gulp');
const rename = require('gulp-rename');
/**
* = CSS Style task
*/
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const styleSrc = './src/scss/style.scss';
const styleDist = './assets/css/';
gulp.task('style', () => {
gulp.src(styleSrc)
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});
This turned out to be a silly mistake, but i forgot to initialize gulp-sourcemaps at the beginning of my gulp task using sourcemaps.init().
Example:
gulp.task('style', () => {
gulp.src(styleSrc)
// Initialize sourcemaps
===> .pipe(sourcemaps.init() <===
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDist));
});