为什么 watch 任务在 gulp 中终止已经使用了 gulp-plumber 插件?
Why watch task terminate in gulp already use gulp-plumber plugin?
我尝试在 gulp (gulp-plumber) 中使用这个插件。我研究了这个插件,它给你错误但它观察状态不是 stop.In 换句话说它在命令 line.But 上给出你的文件错误,它不会停止观看。
https://www.npmjs.com/package/gulp-plumber
但是当我在 sass 文件中更改时尝试在 saas 文件上创建错误,然后它停止监视然后再次我需要给出命令为什么?
这里是我的 gulp 文件。
var gulp = require('gulp');
//require sass package
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
// Compile Our Sass
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(plumber())
.pipe(gulp.dest('css'));
});
// css miifilcation
gulp.task('minify-css',['sass'], function () {
return gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(plumber())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
// js minifiction
gulp.task('compress', function() {
return gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('jdist'));
});
//concatination of js files
gulp.task('scripts', function() {
return gulp.src('jdist/**/*.js')
.pipe(concat('all.js'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/'));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass','minify-css']);
});
gulp.task('default', ['sass', 'watch', 'minify-css','scripts']);
这些是我执行的步骤。
- 在命令行写gulp
- 更改 sass 文件。在 saas 文件中删除一个 '{ 然后它给出错误并终止为什么?
这是我的日志
Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
D:\Webapplication\DemoApp>gulp
[09:11:47] Using gulpfile D:\Webapplication\DemoApp\gulpfile.js
[09:11:47] Starting 'sass'...
[09:11:47] Starting 'watch'...
[09:11:47] Finished 'watch' after 9.13 ms
[09:11:47] Starting 'scripts'...
[09:11:47] Finished 'sass' after 53 ms
[09:11:47] Starting 'minify-css'...
[09:11:47] Finished 'minify-css' after 27 ms
[09:11:47] Finished 'scripts' after 61 ms
[09:11:47] Starting 'default'...
[09:11:47] Finished 'default' after 7.5 µs
[09:13:23] Starting 'sass'...
events.js:141
throw er; // Unhandled 'error' event
^
Error: scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
at options.error (D:\Webapplication\DemoApp\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:277:32)
D:\Webapplication\DemoApp>
在 answer.I 应用你的答案后更新问题。它没有终止但在它之后也没有观看方式?
Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
D:\Webapplication\DemoApp>gulp
[10:43:28] Using gulpfile D:\Webapplication\DemoApp\gulpfile.js
[10:43:28] Starting 'watch'...
[10:43:28] Finished 'watch' after 20 ms
[10:43:28] Starting 'default'...
[10:43:28] Finished 'default' after 7.11 µs
[10:43:42] Starting 'sass'...
[10:43:42] Finished 'sass' after 32 ms
[10:43:42] Starting 'minify-css'...
[10:43:42] Finished 'minify-css' after 30 ms
[10:43:49] Starting 'sass'...
[10:43:49] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
Details:
formatted: Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
column: 1
line: 28
file: stdin
status: 1
messageFormatted: scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
尝试在 sass 任务中交换 sass 和管道工,如 gulp 管道工页面上的示例所示。你的任务应该是这样的
// Compile Our Sass
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass())
.pipe(gulp.dest('css'));
});
更新
为了简化我的回答,我去掉了 js 任务。现在您正在编译 sass,将其缩小并在单个任务中将 min 添加到名称中。
// SASS
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
我尝试在 gulp (gulp-plumber) 中使用这个插件。我研究了这个插件,它给你错误但它观察状态不是 stop.In 换句话说它在命令 line.But 上给出你的文件错误,它不会停止观看。 https://www.npmjs.com/package/gulp-plumber
但是当我在 sass 文件中更改时尝试在 saas 文件上创建错误,然后它停止监视然后再次我需要给出命令为什么?
这里是我的 gulp 文件。
var gulp = require('gulp');
//require sass package
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
// Compile Our Sass
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(plumber())
.pipe(gulp.dest('css'));
});
// css miifilcation
gulp.task('minify-css',['sass'], function () {
return gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(plumber())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
// js minifiction
gulp.task('compress', function() {
return gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('jdist'));
});
//concatination of js files
gulp.task('scripts', function() {
return gulp.src('jdist/**/*.js')
.pipe(concat('all.js'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/'));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass','minify-css']);
});
gulp.task('default', ['sass', 'watch', 'minify-css','scripts']);
这些是我执行的步骤。
- 在命令行写gulp
- 更改 sass 文件。在 saas 文件中删除一个 '{ 然后它给出错误并终止为什么?
这是我的日志
Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
D:\Webapplication\DemoApp>gulp
[09:11:47] Using gulpfile D:\Webapplication\DemoApp\gulpfile.js
[09:11:47] Starting 'sass'...
[09:11:47] Starting 'watch'...
[09:11:47] Finished 'watch' after 9.13 ms
[09:11:47] Starting 'scripts'...
[09:11:47] Finished 'sass' after 53 ms
[09:11:47] Starting 'minify-css'...
[09:11:47] Finished 'minify-css' after 27 ms
[09:11:47] Finished 'scripts' after 61 ms
[09:11:47] Starting 'default'...
[09:11:47] Finished 'default' after 7.5 µs
[09:13:23] Starting 'sass'...
events.js:141
throw er; // Unhandled 'error' event
^
Error: scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
at options.error (D:\Webapplication\DemoApp\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:277:32)
D:\Webapplication\DemoApp>
在 answer.I 应用你的答案后更新问题。它没有终止但在它之后也没有观看方式?
Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
D:\Webapplication\DemoApp>gulp
[10:43:28] Using gulpfile D:\Webapplication\DemoApp\gulpfile.js
[10:43:28] Starting 'watch'...
[10:43:28] Finished 'watch' after 20 ms
[10:43:28] Starting 'default'...
[10:43:28] Finished 'default' after 7.11 µs
[10:43:42] Starting 'sass'...
[10:43:42] Finished 'sass' after 32 ms
[10:43:42] Starting 'minify-css'...
[10:43:42] Finished 'minify-css' after 30 ms
[10:43:49] Starting 'sass'...
[10:43:49] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
Details:
formatted: Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
column: 1
line: 28
file: stdin
status: 1
messageFormatted: scss\home.scss
Error: Invalid CSS after "}": expected "}", was ""
on line 28 of stdin
>> }
^
尝试在 sass 任务中交换 sass 和管道工,如 gulp 管道工页面上的示例所示。你的任务应该是这样的
// Compile Our Sass
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass())
.pipe(gulp.dest('css'));
});
更新
为了简化我的回答,我去掉了 js 任务。现在您正在编译 sass,将其缩小并在单个任务中将 min 添加到名称中。
// SASS
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);