Gulp 오류: 감시 작업은 함수여야 합니다.
여기 제 꿀꺽꿀꺽 파일이 있습니다.
// Modules & Plugins
var gulp = require('gulp');
var concat = require('gulp-concat');
var myth = require('gulp-myth');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin');
// Styles Task
gulp.task('styles', function() {
return gulp.src('app/css/*.css')
.pipe(concat('all.css'))
.pipe(myth())
.pipe(gulp.dest('dist'));
});
// Scripts Task
gulp.task('scripts', function() {
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Images Task
gulp.task('images', function() {
return gulp.src('app/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
// Watch Task
gulp.task('watch', function() {
gulp.watch('app/css/*.css', 'styles');
gulp.watch('app/js/*.js', 'scripts');
gulp.watch('app/img/*', 'images');
});
// Default Task
gulp.task('default', gulp.parallel('styles', 'scripts', 'images', 'watch'));
내가 실행하면.images
,scripts
아니면css
작업만으로도 효과가 있습니다.저는 추가해야 했습니다.return
작업에서 - 책에는 없었지만 구글 검색을 통해 이것이 필요하다는 것을 알 수 있었습니다.
제가 가진 문제는.default
태스크 오류:
[18:41:59] Error: watching app/css/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
at Gulp.watch (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/gulp/index.js:28:11)
at /media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/gulpfile.js:36:10
at taskWrapper (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:287:14)
at runBound (domain.js:300:12)
at asyncRunner (/media/sf_VM_Shared_Dev/webdevadvlocal/gulp/public_html/gulp-book/node_modules/async-done/index.js:36:18)
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)
at Function.Module.runMain (module.js:444:11)
at startup (node.js:136:18)
그것은 또한 없기 때문이라고 생각합니다.return
시계 임무에서또한 오류 메시지가 명확하지 않습니다 - 적어도 저에게는.저는 추가를 해봤습니다.return
맨 나중에gulp.watch()
하지만 그것도 소용이 없었습니다.
gulp 3.x에서 작업의 이름을 전달할 수 있습니다.gulp.watch()
다음과 같이:
gulp.task('watch', function() {
gulp.watch('app/css/*.css', ['styles']);
gulp.watch('app/js/*.js', ['scripts']);
gulp.watch('app/img/*', ['images']);
});
gulp 4.x에서는 더 이상 그렇지 않습니다.기능을 통과시켜야 합니다.이것을 꿀꺽꿀꺽 4.x에서 하는 관습적인 방법은 a를 하는 것입니다.gulp.series()
작업 이름이 하나인 호출입니다.지정된 작업만 실행하는 함수를 반환합니다.
gulp.task('watch', function() {
gulp.watch('app/css/*.css', gulp.series('styles'));
gulp.watch('app/js/*.js', gulp.series('scripts'));
gulp.watch('app/img/*', gulp.series('images'));
});
GULP-V4.0
지금 당장 대답하기엔 좀 늦었지만 그래도 그렇습니다.저도 이 문제에 빠져 있었고 이렇게 작동하게 되었습니다.
내가 무엇을 잘못했는지 자세히 분석합니다.
- 제가 reload 기능을 호출하는 것을 잊었습니다.
watch
html 파일이 약간 변경된 것을 알아차렸습니다. - 부터
fireUp
그리고.KeepWatching
차단하고 있습니다.이들은 직렬보다는 병렬로 시작할 필요가 있습니다.그래서 변수 런에서 병렬 함수를 사용했습니다.
모두에게 감사합니다
gulp.task('watch', function(){
gulp.watch('app/sass/**/*.sass', gulp.series('sass'));
});
version gulp 4.xx의 경우
Gulp 4.0에서 효과가 있었습니다.
gulp.task('watch', function() {
gulp.watch('src/images/*.png', gulp.series('images'));
gulp.watch('src/js/*.js', gulp.series('js'));
gulp.watch('src/scss/*.scss', gulp.series('css'));
gulp.watch('src/html/*.html', gulp.series('html'));
});
//제게 무엇이 효과가 있었는지 확인해 보십시오.
gulp.task('watch', function(){
gulp.watch('css/shop.css', gulp.series(['shop']));
});
제 경우에는 이렇게 해주세요: (gulpfile.js에서) (설치: gulp, gulpasss)
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var cssDest = 'style';
var cssInputFile = 'source/style.scss';
var watchedFiles = 'source/**/*.scss';
gulp.task('buildcss', function(){
return gulp.src(cssInputFile)
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch', function(){
gulp.watch(watchedFiles, gulp.series(['buildcss']));
});
표창: 꿀꺽꿀꺽 시계
(v 4.0)
제 쪽에서도 "{usePolling: true}"을 추가해야 작동할 수 있었습니다.
gulp.watch(paths.js_src + '/*.js', {usePolling: true}, gulp.series(projectScripts, ondemandProjectScripts))
제 코드가 도커 컨테이너에 들어가서 그런 것 같습니다.
언급URL : https://stackoverflow.com/questions/39665773/gulp-error-watch-task-has-to-be-a-function
'programing' 카테고리의 다른 글
WP_Query 개체가 비어 있는지 테스트 (0) | 2023.10.29 |
---|---|
하이퍼링크에서 모든 스타일/형식 제거 (0) | 2023.10.29 |
매달려 있는 이미지란 무엇이고 사용되지 않은 이미지란 무엇입니까? (0) | 2023.10.29 |
Visual Studio에서 MySQL 데이터 원본에 연결하는 방법 (0) | 2023.10.29 |
Flex Slider - 두 슬라이더에 대해 동일한 컨트롤을 추가하는 방법 (0) | 2023.10.29 |