当出现错误时,Gulp不会将Sass编译为CSS。我该如何使用水管工?

时间:2017-04-16 03:12:30

标签: sass gulp gulp-sass

通常,Gulp-Sass会将Sass完美地编译为CSS,直到Sass文件出错(例如:h1 {font-size:})。

我使用Gulp Plumber来防止管道破裂,但我无法找到正确使用它的方法。在上面的示例中,即使我修复了错误并使其成为h1 {font-size:32px;},也不会生成CSS。

错误

Plumber found unhandled error:  
error in plugin 'gulp-sass'  
Message: 
    app\scss\pages\_landing.scss
Error: style declaration must contain a value
...

gulpfile

// Requires Gulp
var gulp = require('gulp');
// Require Gulp Sass
var sass = require('gulp-sass');
// Require Browser Sync
var browserSync = require('browser-sync').create();
// For minificatin
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
// Require imagemin
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Require del
var del = require('del');
// Require runsequence
var runSequence = require('run-sequence');
// Require Sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// Require Plumber
var plumber = require('gulp-plumber');

// Prepocessing Sass
gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(sass()) // Using gulp-sass
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

// Spinning up a Browser Sync Server
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

// Watching for changes
gulp.task('watch', ['sass', 'browserSync'], function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  gulp.watch('app/*.html', browserSync.reload);
})

// Gulp Default Function
gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})

// Minification
gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    // Minifies only if it's a JavaScript file
    .pipe(gulpIf('*.js', uglify()))
    // Minifies only if it's a CSS file
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
});

// Image Optimization
gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg|JPG)')
  // Caching images that ran through imagemin
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(gulp.dest('dist/images'))
});

// Copy Fonts
gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
  .pipe(gulp.dest('dist/fonts'))
})


// Cleaning up generated files
gulp.task('clean:dist', function() {
  return del.sync('dist');
})

// Build Production website
gulp.task('build', function(callback) {
  runSequence(
    'clean:dist',
    'sass',
    ['useref', 'images', 'fonts'],
    callback
  )
})

0 个答案:

没有答案