【问题标题】:Why watch task terminate in gulp already use gulp-plumber plugin?为什么监视任务在 gulp 中终止已经使用 gulp-plumber 插件?
【发布时间】:2015-12-08 03:45:54
【问题描述】:

我尝试在 gulp (gulp-plumber) 中使用这个插件。我研究了这个插件,它给你错误但它观察状态不会停止。换句话说,它在命令行上给你的文件错误。但它不会停止观看 。 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 文件 .remove one '{ in saas file 然后它给出错误并终止为什么?

这是我的日志

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>

在回答后更新问题。我应用您的回答。它没有终止,但在它也没有观看方式之后?

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

【问题讨论】:

    标签: javascript angularjs angularjs-directive gulp gulp-watch


    【解决方案1】:

    尝试在您的 sass 任务中交换 sass 和 plumbber,如 gulp plumber 页面上的示例所示。你的任务应该是这样的

    // 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 添加到 name。

    // 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']);
    

    【讨论】:

    • 请检查我的更新 ..我更改了 css 的颜色并重新加载它工作正常。我从代码中删除了一个“{”。它在没有终止的情况下给出了一个错误。但是当我更正它时不看为什么?。
    • 如何连续观看
    • 我认为你应该在你的 minifi css 上方放置管道工,就像我的回答一样,在你的默认任务中,监视任务应该在 minify-css 之后。您也不必为 minifyins css 设置单独的任务,因为您可以在 sass 中指定输出,就像 .pipe(sass({outputStyle: 'compressed'}))
    猜你喜欢
    • 1970-01-01
    • 2015-03-11
    • 2016-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多