-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added recipe: Sourcemaps with Sass (gulp-sass) and Autoprefixer. #1031
Conversation
Do you really need plumber and such? I'm currently using this setup (straight copy-pasta from my own gulpfile): // Compiles the SASS files and moves them into the "assets/stylesheets" directory
function styles() {
// Looks at the style.scss file for what to include and creates a style.css file
return gulp.src("src/assets/scss/**/*.scss")
// Start creation of sourcemaps
.pipe($.sourcemaps.init())
.pipe($.sass({
errLogToConsole: true
}))
// AutoPrefix your CSS so it works between browsers
.pipe($.autoprefixer("last 1 version", { cascade: true }))
// Write the sourcemaps to the directory of the gulp.src stream
.pipe($.sourcemaps.write("."))
// Directory your CSS file goes to
.pipe(gulp.dest(".tmp/assets/stylesheets/"))
// Outputs the size of the CSS file
.pipe($.size({title: "styles"}))
// Injects the CSS changes to your browser since Jekyll doesn't rebuild the CSS
.pipe(reload({stream: true}));
} And I haven't had any issues with it at all. Note that this is for Gulp 4 though but it should work with Gulp 3 as well. |
This is invalid as it doesn't take into account the autoprefixer transform, which means the source map will be out of sync. |
var sass = require('gulp-sass'); | ||
var sourcemaps = require('gulp-sourcemaps'); | ||
var gulpFilter = require('gulp-filter'); | ||
var plumber = require('gulp-plumber'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove plumber
ping |
I'm a bit confused. When mixing SASS and autoprefixer, what should the source point to? SASS files or CSS before the prefixing? I guess I'm asking what is the expectation when more than one mapping is required. Here is my current task (ES2015): gulp.task("build-css", () => {
return gulp.src(cssSrc)
.pipe(sourcemaps.init())
.pipe(newer({
dest: cssDest,
ext: ".css"
}))
.pipe(print((filepath) => {
return `Building '${filepath}'`;
}))
.pipe(sass({
// See: https://github.com/sass/node-sass/issues/957
//outputStyle: "compressed"
}).on("error", sass.logError))
.pipe(autoprefixer({
// Default for Browserslist (https://github.com/ai/browserslist) @ 2015/09/18
browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(cssDest));
}); It seems to point to the "compiled" CSS file, which is not so useful. Ideally, it should point to the SCSS, as that is the true "source" (files exist, and that is where you would make changes). Is it possible to use autoprefixer without it affecting the CSS -> SCSS sourcemap? It doesn't seem like it would be. If you can autoprefix the SCSS first (which should be possible), then at least the loaded source (sourcesContent) should map properly, but the lines wouldn't match with the file-based source. I'm not really sure what the best option is, if any. 😞 Edit: See dlmanning/gulp-sass#354 |
Closing for inactivity. Please reopen once my comments are fixed. |
(sindresorhus/gulp-autoprefixer#8)