Gulp ruby-sass and autoprefixer do not get along - sass

I have a styles task in my gulpfile:
gulp.task('styles', function () {
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
return gulp.src('app/styles/main.scss')
.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.on('error', function (err) { console.log(err.message); })
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('.tmp/styles'));
});
which generates this in the console:
[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
write main.css.map
events.js:72
throw er; // Unhandled 'error' event
^
Error: /Users/stevelombardi/Documents/command-central/ccgulp/main.css.map:3:3: Unknown word
IF I comment out the pipe to autoprefixer, no errors, everything compiles. What's the deal here?
Note, I also cannot seem to disable the writing of a sourcemap. I tried all the other settings from the repo page for grunt-ruby-sass and none work.
I can live without autoprefixer, but would love to get it working...

The issue seems to happen related to the main.css.map, even if you didn't want one, using gulp-ruby-sass#0.7.1 at the time I am writing this.
I've come across two different solutions so far:
1) If you don't need sourcemaps:
gulp.task('styles', function() {
gulp.src('app/styles/main.scss')
.pipe(sass({
"sourcemap=none": true // hack to allow auto-prefixer to work
}))
.pipe(prefix("last 2 versions"))
.pipe(gulp.dest('css'));
});
This is what I have used as I recently encountered this issue.
2) If you do need sourcemaps:
Then you should try gulp-ruby-sass#1.0.0-alpha
(relevent github issue)

Instead of:
browsers: ['last 2 versions'],
Try this:
browsers: ['last 2 version'],
If that doesn't work, I've had better luck with gulp-sass and gulp-sourcemaps.
// Compile Sass & create sourcemap
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
// Autoprefix, load existing sourcemap, create updated sourcemap
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer('last 2 version')
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css'))

Related

Sources are wrong in Source Map with Gulp

I`m trying to create a valid Source Map with Gulp and gulp-sourcemaps. The Source Map is actually created, but inside, the "sources" parameter is not loading the appropriate paths of my SASS files. This is what I get:
"version":3,"file":"style.css","sources":["style.css"]
When I need to load something like this (created by Koala App):
"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........
This is my Gulp Task
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sass(
{
'outputStyle': 'expanded'
}
))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.')
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
Thanks for the time.
The sourcemaps.init() must go before the sass pipe, so:
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass( {
'outputStyle': 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
See gulp-sass with sourcemaps.
You have two sass calls for some reason, get rid of the first and put its options into the second sass pipe call.

Gulp can't see scss

It's propably some stupid error, but I can't see it!
My gulp can't compile my scss. It seems like I gave him wrong directories, but that was the first thing to check.
There are no errors. Everything seems ok, but it just does not work.
There is this important part of my Gulpfile:
gulp.task('styles-dev', function() {
return gulp.src('src/scss/*.scss')
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('dist/css/'));
});
Folder structure:
root < here is gulpfile
dist
css
inc
node_modules
src
js
scss
I would start from something which works... For example:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles-dev', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css/'));
});
This code adds an error logging, too, so it should be easier to track possible errors...
Then, once you see it working, you can start adding other options and components (style, plumber, autoprefixer, ...).
To start with, you have a couple syntax errors:
Assuming your sass requires gulp-sass, you have an typo: say outputStyle instead of style
Assuming your autoprefixer requires gulp-autoprefixer, your syntax is wrong (see https://github.com/postcss/autoprefixer#usage). It should have { browsers: [] }, "last 2 versions", and capitalization. I think this will work:
.pipe(autoprefixer({ browsers: ['last 2 versions', 'Safari 5', 'IE 8', 'IE 9', 'Opera 12.1'] }))
(To be clear, that will support the two most recent versions of all the major browsers PLUS Safari 5, IE 8 & 9, and Opera 12.1. If that isn't what you wanted to support, check out https://github.com/ai/browserslist#queries)
Once you've made those fixes, add error logging to your plumber: Replace .pipe(plumber()) with
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
If you still have trouble, let us know what errors are logged in the console and we can help you debug!

Gulp libsass/autoprefixer error on comments in sass file

I am switching from gulp-ruby-sass to gulp-sass. Gulp ruby sass was working without errors, but to make life easy on our Windows devs I am trying to remove the dependency on Ruby.
I installed the packages at set up my gulp file like so:
var sassFiles = './app/assets/sass/**/*.{scss,sass}';
var cssFiles = './app/assets/css';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compact'
};
var autoprefixerOptions = {
browsers: ['last 2 versions']
};
gulp.task('sass', function () {
return gulp
.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssFiles))
.pipe(browserSync.stream());
});
Except it fails every time over the comments in my file:
[08:20:39] Starting 'sass'...
events.js:154
throw er; // Unhandled 'error' event
^
CssSyntaxError: /Users/stevelombardi/github/designsystem- 3/app/assets/sass/design_system.scss:1:1: Unknown word
////
^
/// This is a poster comment.
which maps to a comment in the scss file. Note that even if I remove this block, sass simply errors on the next comment.
If I comment out the autoprefixer pipe it works. So what's the issue here?
FWIW, I was following the guidelines from this site.
There are no Javascript-style single-line // comments in CSS, only multi-line /* */ comments.
Single-line // comments are supported by SASS/SCSS, but stripped from the resulting CSS.
Since autoprefixer only operates on CSS not SASS/SCSS you need to run sass() before autoprefixer():
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))

gulp-sass compiles Google Fonts CSS into the file, breaks protocol-relative link

When I use the following code in my .scss file
#import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');
the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the compiled output.
Here's my Gulpfile:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
minify = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('www/sass/*.scss')
.pipe(plumber(function(err){
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
errLogToConsole: true,
}))
.pipe(autoprefixer('last 2 version'))
.pipe(rename({suffix: '.min' }))
.pipe(minify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('www/css'));
});
Problem is, my site uses HTTPS, and when the file is requested by the compiler, it fetches the file using HTTP and as such the URLs in the returned response are also HTTP which results in loads of warnings filling up the console, while the fonts would not load.
Is there any way I could tell the compiler to leave that line alone?
The issue was not with gulp-sass itself, but with gulp-minify-css that did the compression of the rendered CSS files. The solution is to pass {processImport: false} to minify:
gulp.task('sass', function() {
gulp.src('www/sass/*.scss')
.pipe(plumber(function(err){
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
errLogToConsole: true,
}))
.pipe(autoprefixer('last 2 version'))
.pipe(rename({suffix: '.min' }))
// Here
.pipe(minify({processImport: false}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('www/css'));
});
Protocol relative URLs are now discouraged. I would suggest setting the URL to HTTPS and leaving it that way.

Can't get line numbers in gulp-ruby-sass

I have set up a gulp-ruby-sass task in gulp, with some options.
Options 'precision' and 'style' work as expected, but I get no debugInfo or lineNumbers in the css (I do get them with compass).
My gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
function errorLog(error)
{
console.log(error.toString());
this.emit('end');
}
// SASS
gulp.task('styles', function(){
gulp.src('scss/**/*.scss')
.pipe(sass({
debugInfo : true,
lineNumbers : true,
precision : 6,
style : 'normal'
}))
.on('error', errorLog)
.pipe(gulp.dest('css/'));
});
What am I doing wrong?
I was able to figure this out. The solution was two-fold for me. If I added the lineNumbers option, it would fail with a file not found error. This is probably because I am compiling both normal css (with line numbers) along with a minified version.
I needed to add the "container" option in order for it to work correctly.
Here's what my working gulp tasks look like:
gulp.task('styles', function()
{
return sass('app/assets/sass/app.scss', { style: 'expanded', lineNumbers: true, container: 'gulp-ruby-sass' })
.pipe(autoprefixer('last 15 version'))
.pipe(gulp.dest('public/css'));
});
gulp.task('styles-min', function()
{
return sass('app/assets/sass/app.scss', { style: 'expanded', container: 'gulp-ruby-sass-min' })
.pipe(autoprefixer('last 15 version'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('public/css'));
});
NOTE: The lineNumbers option is somewhat misleading because it's actually the path to the source sass/scss file AND the line number.

Resources