How to use source files with gulp-sass + gulp-minify-css + autoprefixer + rename?
I am currently using a gulp workflow that uses a method createSassTask()
to create a task for each of several different httpddocs directories in the same project. Below is my current one gulpfile.js
:
var package = require('./package.json'),
gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
minifyCSS = require('gulp-minify-css'),
notify = require('gulp-notify');
function createSassTask(directory) {
var taskName = 'sass-'+directory;
gulp.task(taskName, function() {
return gulp.src('./'+directory+'/media/sass/**/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 4 version'))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename({suffix: '.min' }))
.pipe(gulp.dest('./'+directory+'/media/css'))
.pipe(notify('SASS compiled for ' + directory));
});
gulp.watch('./'+directory+'/media/sass/**/*.scss', [taskName]);
}
gulp.task('default', function () {
createSassTask('httpdocs-site1');
createSassTask('httpdocs-site2');
createSassTask('httpdocs-site3');
});
What's the best way to use sourcemaps with tasks like this? I tried to use gulp-sourcemaps
, but I need to be able to wrap functions in init()
and write()
around sass, autoprefixer, minifyCSS, and rename. I don't think minifyCSS or rename support gulp-sourcemaps
. Is there another way?
source to share
You depend on sourcemaps support on every single gulp-plugin you use in your pipeline.
A complete table of supported plugins can be found here .
This is a known issue, also when you, for example, @import
your Sass files. See this on GitHub where they use a (ugly) way to resolve this by creating source maps twice so that it wraps around each plugin so to speak.
source to share
When gulp - * plugins (gulp -less, gulp-concat, gulp-minify-css, ...) have sourcemaps support , it should "work".
My problem was that I was using older versions of these individual gulp plugins - *. Sourcemaps were added later in later versions. Always make sure you are using the latest version of gulp plugins - * (with sourcemaps support).
source to share