오류로 인한 Gulp Watch 깨짐
3.6.2를 실행하고 있으며 온라인 샘플에서 설정된 다음 작업이 있습니다.
gulp.task('watch', ['default'], function () {
gulp.watch([
'views/**/*.html',
'public/**/*.js',
'public/**/*.css'
], function (event) {
return gulp.src(event.path)
.pipe(refresh(lrserver));
});
gulp.watch(['./app/**/*.coffee'],['scripts']);
gulp.watch('./app/**/*.scss',['scss']);
});
내 CoffeeScript gulp 시계에 오류가 있을 때마다 - 분명히 내가 원하는 것이 아닙니다.
gulp.watch(['./app/**/*.coffee'],['scripts']).on('error', swallowError);
gulp.watch('./app/**/*.scss',['scss']).on('error', swallowError);
function swallowError (error) { error.end(); }
하지만 효과가 없는 것 같습니다.
내가 뭘 잘못하고 있는 거지?
@Apercu의 대답에 따라 나는 수정했습니다.swallowError방법을 사용하여 대신 다음을 시도했습니다.
gulp.task('scripts', function () {
gulp.src('./app/script/*.coffee')
.pipe(coffee({ bare: true }))
.pipe(gulp.dest('./public/js'))
.on('error', swallowError);
});
다시 시작한 다음 내 커피 파일에 구문 오류를 만들었습니다.동일한 문제:
[gulp] Finished 'scripts' after 306 μs
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: W:\bariokart\app\script\trishell.coffee:5:1: error: unexpected *
*
^
at Stream.modifyFile (W:\bariokart\node_modules\gulp-coffee\index.js:37:33)
at Stream.stream.write (W:\bariokart\node_modules\gulp-coffee\node_modules\event-stream\node_modules\through\index.js:26:11)
at Stream.ondata (stream.js:51:26)
at Stream.EventEmitter.emit (events.js:95:17)
at queueData (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:43:21)
at next (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:71:7)
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:85:7
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\lib\src\bufferFile.js:8:5
at fs.js:266:14
at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\graceful-fs.js:104:5
at Object.oncomplete (fs.js:107:15)
당신의.swallowError함수는 다음과 같아야 합니다.
function swallowError (error) {
// If you want details of the error in the console
console.log(error.toString())
this.emit('end')
}
제 생각에 당신은 이 기능을 에 바인딩해야 합니다.error의 이벤트가 watch작업, 문제가 발생하는 곳이 아니기 때문에, 당신은 실패할 수 있는 각 작업에 대해 이 오류 콜백을 설정해야 합니다. 예를 들어, 플러그인을 놓쳤을 때 끊기는 것과 같습니다.;, 예니다위것해른기하방면아▁or예하위해.watch중지할 작업입니다.
예:
gulp.task('all', function () {
gulp.src('./app/script/*.coffee')
.pipe(coffee({ bare: true }))
.on('error', swallowError)
.pipe(gulp.dest('./public/js'))
gulp.src('css/*.scss')
.pipe(sass({ compass: true }))
.on('error', swallowError)
.pipe(cssmin())
.pipe(gulp.dest('dist'))
})
또는 다른 모듈을 포함하는 것이 괜찮다면 gulp-util의 로그 기능을 사용하여 추가 기능을 선언하지 않도록 할 수 있습니다.gulpfile:
.on('error', gutil.log)
하지만 저는 그것을 제거하는 데 사용되는 멋진 흡입-플러그 플러그인을 보는 것을 추천할 수 있습니다.onerror의러들의 error이벤트로 인해 스트림이 끊어집니다.사용이 매우 간단하며 실패할 수 있는 모든 작업을 파악할 수 없습니다.
gulp.src('./app/script/*.coffee')
.pipe(plumber())
.pipe(coffee({ bare: true }))
.pipe(gulp.dest('./public/js'))
관련 플러그인 작성자가 이 기사에 대해 자세히 설명합니다.
위의 예시들은 저에게 효과가 없었습니다.그러나 다음과 같은 경우가 있었습니다.
var plumber = require('gulp-plumber');
var liveReload = require('gulp-livereload');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var compass = require('gulp-compass');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
var notify = require('gulp-notify');
gulp.task('styles', function () {
//only process main.scss which imports all other required styles - including vendor files.
return gulp.src('./assets/scss/main.scss')
.pipe(plumber(function (error) {
gutil.log(error.message);
this.emit('end');
}))
.pipe(compass({
config_file: './config.rb',
css: './css'
, sass: './assets/scss'
}))
//minify files
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
//output
.pipe(gulp.dest('./css'))
.pipe(notify({message: 'Styles task complete'}));
});
gulp.task('watch', function () {
liveReload.listen();
gulp.watch('assets/scss/**/*.scss', ['styles']);
});
단일 형식의 파일 사용
(예: *.dll만 해당)
하려면 다음과 같이 .gulp-plumber당신의 해결책입니다.
커피 스크립팅에 대한 리치 처리 오류 및 경고 예:
gulp.task('scripts', function() {
return gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError)
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
여러 유형의 파일 형식 사용
(예: *.js 및 *.js 동시)
그나여유의파예일형식형러러예▁(형(식파일▁but:▁with▁multiple)으로 작업하지 *.js그리고.*.coffee제 할 것입니다.), 제제을게시것입할다니가해결책▁),것다니입▁than.
여기에 설명이 있는 자체 설명 코드를 게시합니다.
gulp.task('scripts', function() {
// plumber don't fetch errors inside gulpif(.., coffee(...)) while in watch process
return gulp.src(['assets/scripts/**/*.js', 'assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(gulpif(/[.]coffee$/, coffeelint()))
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(gulpif(/[.]coffee$/, coffee({ // if some error occurs on this step, plumber won't catch it
bare: true
})))
.on('error', swallowError)
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
는 이 에 직면했습니다.gulp-plumber그리고.gulp-if용사를 gulp.watch(...
관련 문제는 여기를 참조하십시오. https://github.com/floatdrop/gulp-plumber/issues/23
그래서 제게 가장 좋은 선택은:
- 각 부품을 파일로 만들고 이후에 연결합니다.그룬트처럼 각 부품을 별도의 파일로 처리할 수 있는 여러 작업을 만들고 연결합니다.
- 각 부분은 스트림으로 사용되며 이후에 스트림을 병합합니다.다음을 사용하여 두 스트림 병합
merge-stream(제조원:event-stream) 하나로 통합하여 작업을 계속합니다(처음에는 시도했지만, 저에게는 잘 작동하기 때문에 이전 것보다 빠른 해결책입니다).
각 부분을 스트림으로 지정하고 이후 스트림을 병합합니다.
그녀는 내 코드의 주요 부분입니다.
gulp.task('scripts', function() {
coffeed = gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError);
jsfiles = gulp.src(['assets/scripts/**/*.js']);
return merge([jsfiles, coffeed])
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
각 부품을 파일로 사용하고 다음에 연결합니다.
이를 부품으로 분리하려면 각 부품에 결과 파일이 생성되어야 합니다.예:
gulp.task('scripts-coffee', function() {
return gulp.src(['assets/scripts/**/*.coffee'])
.pipe(plumber())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(lintThreshold(10, 0, lintThresholdHandler))
.pipe(coffee({
bare: true
}))
.on('error', swallowError)
.pipe(concat('application-coffee.js'))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('scripts-js', function() {
return gulp.src(['assets/scripts/**/*.js'])
.pipe(concat('application-coffee.js'))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('scripts', ['scripts-js', 'scripts-coffee'], function() {
var re = gulp.src([
'dist/scripts/application-js.js', 'dist/scripts/application-coffee.js'
])
.pipe(concat('application.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
del(['dist/scripts/application-js.js', 'dist/scripts/application-coffee.js']);
return re;
});
추신:
사용된 모듈 및 기능은 다음과 같습니다.
// Load plugins
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
merge = require('ordered-merge-stream'),
replace = require('gulp-replace'),
del = require('del'),
gulpif = require('gulp-if'),
gulputil = require('gulp-util'),
coffee = require('gulp-coffee'),
coffeelint = require('gulp-coffeelint),
lintThreshold = require('gulp-coffeelint-threshold');
var lintThresholdHandler = function(numberOfWarnings, numberOfErrors) {
var msg;
gulputil.beep();
msg = 'CoffeeLint failure; see above. Warning count: ';
msg += numberOfWarnings;
msg += '. Error count: ' + numberOfErrors + '.';
gulputil.log(msg);
};
var swallowError = function(err) {
gulputil.log(err.toString());
this.emit('end');
};
저는 gulf pumber를 사용하는 것을 좋아합니다. 왜냐하면 gulf pumber는 작업에 글로벌 청취자를 추가할 수 있고 의미 있는 메시지를 표시할 수 있기 때문입니다.
var plumber = require('gulp-plumber');
gulp.task('compile-scss', function () {
gulp.src('scss/main.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest('css/'));
});
참조: https://scotch.io/tutorials/prevent-errors-from-crashing-gulp-watch
이에 대한 간단한 해결책은 다음과 같습니다.gulp watchBash(또는 sh) 셸 내의 무한 루프에서.
while true; do gulp; gulp watch; sleep 1; done
JavaScript를 편집할 때 화면에 표시되는 영역에 이 명령어의 출력을 유지합니다.편집 결과 오류가 발생하면 Gulp은 충돌하고 스택 추적을 인쇄한 후 잠시 기다린 후 원본 파일을 다시 볼 수 있습니다.그런 다음 구문 오류를 수정할 수 있습니다. Gulp은 편집이 성공했는지 여부를 일반 출력으로 출력하거나 다시 충돌(다시 시작)하여 표시합니다.
이것은 Linux 또는 Mac 터미널에서 작동합니다.윈도우즈를 사용하는 경우 Cygwin 또는 Ubuntu Bash(윈도우즈 10)를 사용합니다.
https://github.com/gulpjs/gulp/issues/71 에 대한 해결 방법으로 다음과 같은 해킹을 구현했습니다.
// Workaround for https://github.com/gulpjs/gulp/issues/71
var origSrc = gulp.src;
gulp.src = function () {
return fixPipe(origSrc.apply(this, arguments));
};
function fixPipe(stream) {
var origPipe = stream.pipe;
stream.pipe = function (dest) {
arguments[0] = dest.on('error', function (error) {
var state = dest._readableState,
pipesCount = state.pipesCount,
pipes = state.pipes;
if (pipesCount === 1) {
pipes.emit('error', error);
} else if (pipesCount > 1) {
pipes.forEach(function (pipe) {
pipe.emit('error', error);
});
} else if (dest.listeners('error').length === 1) {
throw error;
}
});
return fixPipe(origPipe.apply(this, arguments));
};
return stream;
}
gulpfile.js에 추가하여 다음과 같이 사용합니다.
gulp.src(src)
// ...
.pipe(uglify({compress: {}}))
.pipe(gulp.dest('./dist'))
.on('error', function (error) {
console.error('' + error);
});
이것은 저에게 가장 자연스러운 오류 처리처럼 느껴집니다.오류 처리기가 전혀 없으면 오류가 발생합니다.노드 v0.11.13을 사용하여 테스트했습니다.
활자 원고
이것이 저에게 효과가 있었습니다.함께 작업합니다.Typescript그리고 기능을 분리했습니다(와의 혼동을 피하기 위해).this키워드) 처리할less이 기능은 다음과 같이 작동합니다.Javascript뿐만 아니라.
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', function() {
// writing a function to avoid confusion of 'this'
var l = less({});
l.on('error', function(err) {
// *****
// Handle the error as you like
// *****
l.emit('end');
});
return gulp
.src('path/to/.less')
.pipe(l)
.pipe(gulp.dest('path/to/css/output/dir'))
})
이제, 당신이watch .less파일 및error발생,watch중지되지 않고 새 변경사항이 처리됩니다.less task.
참고: 사용해 보았습니다.l.end();하지만, 그것은 작동하지 않았습니다.하지만,l.emit('end');완전히 효과가 있습니다.
도움이 되길 바랍니다.행운을 빌어요.
이것은 나에게 효과가 있었습니다 ->
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
setTimeout(function(){
return gulp.src('sass/*.sass')
.pipe(sass({indentedSyntax: true}))
.on('error', console.error.bind(console))
.pipe(gulp.dest('sass'));
}, 300);
});
gulp.task('watch', function(){
gulp.watch('sass/*.sass', ['sass']);
});
gulp.task('default', ['sass', 'watch'])
.on('error', console.error.bind(console)) 행을 추가했지만 gulp 명령을 루트로 실행해야 했습니다.저는 php 애플리케이션에서 노드걸프를 실행하고 있어서 한 서버에 여러 계정이 있습니다. 그래서 저는 걸프를 루트로 실행하지 않았기 때문에 구문 오류에서 걸프 깨짐 문제에 부딪혔습니다...아마도 배관공과 여기에 있는 다른 답들 중 일부는 제가 뿌리로서 달렸다면 저에게 효과가 있었을 것입니다.정답은 Accio Code https://www.youtube.com/watch?v=iMR7hq4ABOw 에 입력하십시오.그는 오류를 처리함으로써 오류가 어떤 줄에 있는지, 콘솔에 무엇이 있는지 확인하는 데 도움이 되지만 구문 오류로 인한 손실을 억제할 수도 있다고 말했습니다.그는 그것이 일종의 가벼운 해결책이라고 말했는데, 그래서 그것이 당신이 찾고 있는 것에 효과가 있을지 확신할 수 없습니다.그래도 빨리 고치고, 시도해 볼 만합니다.이것이 누군가에게 도움이 되기를 바랍니다!
언급URL : https://stackoverflow.com/questions/23971388/prevent-errors-from-breaking-crashing-gulp-watch
'programing' 카테고리의 다른 글
| 대규모 데이터셋을 위한 데이터베이스 설계 (0) | 2023.07.25 |
|---|---|
| 인텐트(최적의 솔루션)를 통해 열거나 개체 전달 (0) | 2023.07.25 |
| 매우 큰 테이블에서 Mysql 개수 성능 (0) | 2023.07.25 |
| 팬더 뱃놀이는 경기력에 문제가 있습니까? (0) | 2023.07.25 |
| 열을 Oracle db의 동일한 테이블 내의 다른 열로 복사합니다.어떤 데이터가 어디에 저장되는지 지정해야 합니까? (0) | 2023.07.25 |