Gulp-시계

Watch 메서드는 소스 파일을 모니터링하는 데 사용됩니다. 소스 파일이 변경되면 감시는 적절한 작업을 실행합니다. '기본'작업을 사용하여 HTML, CSS 및 JavaScript 파일의 변경 사항을 확인할 수 있습니다.

기본 작업 업데이트

이전 장에서 기본 작업을 사용 하여 작업 을 결합 하는 방법을 배웠습니다 . gulp-minify-css, gulp-autoprefixer 및 gulp-concatplugins를 사용하고 CSS 파일을 축소하기 위해 스타일 작업을 만들었습니다.

CSS 파일을 보려면 다음 코드와 같이 'default'작업을 업데이트해야합니다.

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

아래의 모든 CSS 파일 work/src/styles/ 폴더가 감시되고 이러한 파일이 변경되면 스타일 작업이 실행됩니다.

기본 작업 실행

다음 명령을 사용하여 '기본'작업을 실행합니다.

gulp

위의 명령을 실행하면 다음과 같은 출력이 표시됩니다.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

CSS 파일이 변경 될 때마다 다음 출력이 표시됩니다.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

감시 프로세스는 활성 상태로 유지되며 변경 사항에 응답합니다. 누를 수 있습니다Ctrl+C모니터링 프로세스를 종료하고 명령 줄로 돌아갑니다.