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

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(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.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

throw er; // Unhandled 'error' event
Error: E:\Projects\gulp\css\styles.min.css:1429:19: Unknown word ←[90m 1427 |
←[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