gulp sass 任务上的 gulp 构建错误

Question

在 gulp build 上运行时，我在 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

这是我在样式表中使用的用于渐变的浏览器特定 css 规则

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

使用的节点包是，

"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"
  }

最后是 gulp sass 任务

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

如何解决此错误。任何帮助或方向将不胜感激..提前致谢..我正在使用node 4.4.4的节点版本

新的错误信息

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

并且还建议如何阅读这些类型的错误.. 是否有任何 CSS lint 在线用于 gulp-sass 或任何附加的 atom 包.. 这样我就可以在 gulp-build 之前对 CSS 进行 lint... 再次感谢

Answer 1

您的过滤器属性中有一个额外的空格，位于progid 和:DXImageTransform.Microsoft.gradient 之间，这会导致missed semicolon 错误。

此外，使用您的 Gulp 插件，您有 gulp-autoprefixer。将其添加到您的 Gulp sass 任务中（在 .pipe(sourcemaps.write()) 之前）：

.pipe(autoprefixer())

而且不要只写：

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

Autoprefixer 将完成这项工作并添加预期的前缀（取决于您的设置）。