Gulp can't see scss - sass

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!

Related

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))

Can't compile sass files, have such error http://joxi.ru/4Ako9e9TMyY6DA

Need your help, Can't compile sass files, have such error
[16:51:40] Finished 'serve' after 113 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: assets\sass\style.sass
undefined
at options.error (C:\Users\Ростислав\Desktop\last\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:277:32)
style.sass have only #imports http://joxi.ru/5mdY3M3HvkYX42, tried to remove remove alternately, but it helps,when remove all imports
my gulp task
gulp.task('sass', function () {
gulp.src('assets/sass/*.sass')
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],
cascade: false,
remove: false
}))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
There is a known issue with LibSass and directories with Cyrillic characters. This may also apply to other non-ASCII characters. Please try the gulp-sass beta for the patch:
npm install gulp-sass#beta

Using Gulp to compile separate scss files into separate css files

The below works a treat to compile my style.css, however, I have another file in the same directory called editor-style.scss and would like to compile it as .css (same destination)
I don't know JS and have hacked around with a few suggestions, but it just doesn't like any of my syntaxes.
Could someone put me out of my misery?
many thanks.
gulp.task('sass', function() {
return sass('sass/style.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9','opera 12.1', 'ios 6', 'android 4' ))
.pipe(gulp.dest(''))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(livereload());
});
Apologies if you need to see more of the gulpfile... let me know if this is the case and I will share.
Try this. It should compile .scss files in sass folder seperately. Inform me if it doesn't work.
gulp.task('sass', function() {
return sass('sass/*.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9','opera 12.1', 'ios 6', 'android 4' ))
.pipe(gulp.dest(''))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(livereload());
});

Gulp ruby-sass and autoprefixer do not get along

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'))

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