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());
});
Related
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!
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
I have no idea why my Sass task breaks when I'm using gulp-plumber. My Sass task looks like this:
gulp.task('sass', function() {
return gulp.src(['./src/scss/*.scss', './src/scss/**/*.scss'])
.pipe(plumber())
.pipe(sass({
includePaths : [
'./lib/basscss/scss',
'./lib/fluidbox/css'
],
outputStyle: 'expanded'
}))
.pipe(prefix({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(minifyCSS())
.pipe(gulp.dest('./_site/public/css'))
.pipe(gzip())
.pipe(gulp.dest('./_site/public/css'))
.pipe(reload({stream: true}))
});
When I intentionally make an error in my Sass file(s), I get this error:
Error in plugin 'gulp-sass'
Message:
src/scss/components/_cover.scss
30:3 property "background-i" must be followed by a ':'
Details:
column: 3
line: 30
file: /Volumes/Boba/Work/Sites/realph/src/scss/components/_cover.scss
status: 1
messageFormatted: src/scss/components/_cover.scss
30:3 property "background-i" must be followed by a ':'
And that's it – it breaks the task. I have to abort the gulp task and re-run it from the top.
Any idea why this is happening? Any help is appreciated. Thanks in advance!
That's because the task you're running is not ended yet. You need to tell plumber to end the task when error is occured using handleError options. Here's my plumber configuration:
.pipe(plumber({
errorHandler: function(err) {
// display the error message
console.log(err);
// end the errored task
this.emit('end') }
}))
Hope this helps
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'))
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.