Yesvinkumar Yesvinkumar -4 years ago 244
CSS Question

gulp build error on gulp sass task

When running on gulp build, I have encountered the following error in the CLI

events.js:141
throw er; // Unhandled 'error' event
^
Error: E:\Projects\gulp\css\styles.min.css:546:10: Missed semicolon ←[90m 544 | ←[39m b
ackground←[33m:←[39m ←[36m-ms-linear-gradient←[39m←[36m(top, #5c710d 0%,#93b904 100%)←[39m←[33m;←[39m
←[90m 545 | ←[39m background←[33m:←[39m ←[36mlinear-gradient←[39m←[36m(to bottom, #5c710d 0%,#93b904 100%)←[39m←[33m;←[39m

←[31m←[1m>←[22m←[39m←[90m 546 | ←[39m filter←[33m:←[39m progid ←[33m:←[39m←[36mDXImageTransform.Microsoft.gradient←[39m←[36m(←[39m star
tColorstr=←[32m'#5c710d'←[39m, endColorstr=←[32m'#93b904'←[39m,GradientType=0 ←[36m)←[39m←[33m;←[39m
←[90m | ←[39m ←[31m←[1m^←[22m←[39m
←[90m 547 | ←[39m←[33m}←[39m
←[90m 548 | ←[39m←[33m.ui-overlay-c←[39m ←[33m{←[39m


Here is the browser specific css rule for gradient which i used in a stylesheet

background: -moz-linear-gradient(top, #5c710d 0%, #93b904 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c710d), color-stop(100%,#93b904));
background: -webkit-linear-gradient(top, #5c710d 0%,#93b904 100%);
background: -o-linear-gradient(top, #5c710d 0%,#93b904 100%);
background: -ms-linear-gradient(top, #5c710d 0%,#93b904 100%);
background: linear-gradient(to bottom, #5c710d 0%,#93b904 100%);
filter: progid :DXImageTransform.Microsoft.gradient( startColorstr='#5c710d', endColorstr='#93b904',GradientType=0 );


The used node packages are,

"devDependencies": {
"bower": "^1.8.0",
"gulp": "^3.9.1"
"browser-sync": "^2.18.8",
"del": "^2.2.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-cache": "^0.4.6",
"gulp-cssnano": "^2.1.2",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.1.1",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.1",
"gulp-uglify": "^2.1.2",
"gulp-useref": "^3.1.2",
"run-sequence": "^1.2.2"
}


and finally the gulp sass task

gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})


How to fix this error. Any help or direction would be greatly appreciated.. Thanks in advance.. And am using the node version of
node 4.4.4


The new error message

events.js:141
throw er; // Unhandled 'error' event
^
Error: E:\Projects\gulp\css\styles.min.css:1429:19: Unknown word ←[90m 1427 |
←[39m←[33m}←[39m
←[90m 1428 | ←[39m←[33m.list←[39m ←[33m.icn←[39m ←[33m{←[39m
←[31m←[1m>←[22m←[39m←[90m 1429 | ←[39m margin-top←[33m:←[39m 10px←[33m;←[39m!important
←[90m | ←[39m ←[31m←[1m^←[22m←[39m
←[90m 1430 | ←[39m←[33m}←[39m
←[90m 1431 | ←[39m←[33m.list←[39m ←[33m.txt←[39m ←[33m{←[39m


and also suggest how to read these type of errors.. Is there any CSS lint online for gulp-sass or any add on for atom package.. So that i can lint the CSS before gulp-build... Thanks again

Answer Source

You have an extra space in your filter property, between progidand :DXImageTransform.Microsoft.gradient, which cause the missed semicolon error.

Also, within your Gulp workflow, you use gulp-autoprefixer. It's mean that you just have to write nothing more than :

background: linear-gradient(to bottom,  #5c710d 0%,#93b904 100%);

and Autoprefixer will do the job and will add the expected prefixes (depending of your settings).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download