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
Related
function sass() {
return gulp
.src("src/scss/main.scss")
.pipe(sass({ includePaths: ["scss"] }))
.pipe(gulp.dest("./css"))
.pipe(minifycss());
}
And i'm getting this error message:
C:\Users\Vipin\Desktop\starter_project>gulp sass
[15:53:51] Using gulpfile ~\Desktop\starter_project\gulpfile.js
[15:53:51] Starting 'sass'...
[15:53:51] The following tasks did not complete: sass
[15:53:51] Did you forget to signal async completion?
I'm using gulp4. Please help!!!
I have downloaded AngularJS setup for PhoneGap from this tutorial.
Now I would like to use Sass instead of Less (since that's what I'm using in the project I am porting to PhoneGap). The default Less task looks like this:
gulp.task('less', function () {
return gulp.src(config.less.src).pipe(less({
paths: config.less.paths.map(function(p){
return path.resolve(__dirname, p);
})
}))
.pipe(mobilizer('app.css', {
'app.css': {
hover: 'exclude',
screens: ['0px']
},
'hover.css': {
hover: 'only',
screens: ['0px']
}
}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.join(config.dest, 'css')));
});
I've tried this Gulp task for Sass:
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('./src/css/'));
});
Nothing seems to be happening (cannot see a newly generated main.scss file). Could someone help (I haven't been using Gulp before as you can probably guess. I've read through this though..)
UPDATE:
I am not actually replacing the Less task, I am just adding another task for Sass.
UPDATE 2:
I am calling the Sass task in here
gulp.task('watch', function () {
if(typeof config.server === 'object') {
gulp.watch([config.dest + '/**/*'], ['livereload']);
}
gulp.watch(['./src/html/**/*'], ['html']);
gulp.watch(['./src/sass/css/*'], ['sass']);
gulp.watch(['./src/js/**/*', './src/templates/**/*', config.vendor.js], ['js']);
gulp.watch(['./src/images/**/*'], ['images']);
});
However the problem seems to be that it's not executed.
UPDATE 3:
Here's the build phase code
gulp.task('build', function(done) {
var tasks = ['html', 'fonts', 'images', 'sass', 'js'];
seq('clean', tasks, done);
});
Your path is absolute, not relative. Don't forget the dots ;)
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'));
});
I'm not using compass or codekit, just Gulp to compile my SASS files. And a .sass-cache folder gets generated. I'd rather it not and don't mind the extra nano secs it would take to compile, because it adds too much to my quick find in Sublime Text.
In the docs for gulp-ruby-sass I found the option for noCache however I'm not sure where to set it or what the syntax is. Would you know? Somewhere in my GulpFile?
https://www.npmjs.com/package/gulp-ruby-sass
noCache
Type: Boolean
Default: false
Here is my Gulp Task
gulp.task('web_css', function() {
return sass('bower_components/sass-smacss/sass/manage.scss', { style: 'compressed' })
.pipe(sass({ noCache: true }))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('assets/css/'))
});
This is a valid example of how to do it:
gulp.task('sass', function () {
return sass('bower_components/sass-smacss/sass/manage.scss',
{ noCache: true, style: 'compressed' }
)
.pipe(gulp.dest('path/to/your/css'))
);;
});
When you apply the sass function, you have to pass your option as a parameters.
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.