通常,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
)
})