The Watch method is used to monitor your source files. When any changes to the source file is made, the watch will run an appropriate task. You can use the \u2018default\u2019 task to watch for changes to HTML, CSS, and JavaScript files.<\/p><\/blockquote>\n
Step 1: Install gulp-watch<\/strong><\/p>\n In the bash command line type:<\/p>\n This should now appear in the package.json file:<\/p>\n <\/p>\n Step 2: Import gulp-watch to the project Add this new requirement to the top of the gulpfile.js file:<\/p>\n If using multiple requires, you can set them up at the top of the gulpfile.js using a comma instead of two separate var declarations:<\/p>\n <\/p>\n Step 3: Set up a watch task Inside the gulpfile.js, create a new ‘watch’ task. For example:<\/p>\n Then test this in the command window:<\/p>\n This task stays open in the bash window, watching for a change to the file I want to monitor.<\/p>\n Open the .\/app\/index.html file and make a trivial change, for example adding a blank line somewhere. The instant I click save on the target file, the bash window updates with:<\/p>\n What happened? gulp-watch was monitoring that file for changes. As soon as I saved a change to the watched file, the \u2018watch’ task launched the anonymous function which launched the \u2018html\u2019 task which was designated by To stop the watch task, type CTRL+c in the bash window.<\/p>\n <\/p>\n Step 4: Watch css files Create a new folder under\u00a0 Then add the following second “watch” to the watch task in the gulpfile.js:<\/p>\n And create a new gulp.task for ‘styles’:<\/p>\n Altogether, the gulpfile.js file should look like this:<\/p>\n Then test it in the bash window:<\/p>\n This turns the watching on. Then make a change to the styles.css file and save it and make a change to the index.html file and save it. Which yields:<\/p>\n Note that each change was immediately detected by gulp-watch! This example shows how to print a statement to the console when a change is detected, but there are much more powerful things we can accomplish with this!<\/p>\n <\/p>\n For more information about gulp-watch see: Assuming Gulp is already installed for your project, and your gulpfile.js file is already created, this article describes how to use the gulp-watch plugin. Here is what\u00a0 tutorialspoint.com says about gulp-watch: The Watch method is used to monitor your source files. When any changes to the source file is made, the watch will run an … Continue reading JavaScript: How to use gulp-watch<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[92,93,45,91],"class_list":["post-1347","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-gulp","tag-gulp-watch","tag-javascript","tag-npm"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1347"}],"version-history":[{"count":10,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1347\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1347\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}npm install gulp-watch --save-dev<\/pre>\n
{\r\n \"name\": \"travel-site\",\r\n \"version\": \"1.0.0\",\r\n \"dependencies\": {\r\n \"jquery\": \"3.2.1\",\r\n },\r\n \"devDependencies\": {\r\n \"gulp\": \"3.9.1\",\r\n \"gulp-watch\": \"4.3.11\",\r\n }\r\n}<\/pre>\n
\n<\/strong><\/p>\nvar watch = require('gulp-watch');<\/pre>\nvar gulp = require('gulp'),\r\n watch = require('gulp-watch');<\/pre>\n
\n<\/strong><\/p>\ngulp.task('watch', function() {\r\n \r\n \/\/ watch takes two arguments:\r\n \/\/ 1. The file on our computer that we want to watch for saved changes to\r\n \/\/ 2. Anonymous function definition\r\n watch('.\/app\/index.html', function() {\r\n gulp.start('html');\r\n });\r\n\r\n});<\/pre>\ngulp watch<\/pre>\n
![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_watch.png\")
<\/p>\n![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_watch_html.png\")
<\/p>\ngulp.start('html');<\/code>.<\/p>\n
\n<\/strong><\/p>\n.\/app\/assets\/<\/code> called styles. Inside this folder, create a new file in Atom called styles.css. Leave the file blank at first, just save it.<\/p>\n\/\/ Create a second watch task that will watch all css files in the styles folder\r\nwatch('.\/app\/assets\/styles\/**\/*.css', function() {\r\n gulp.start('styles');\r\n});<\/pre>\ngulp.task('styles', function() {\r\n console.log(\"Imagine SASS or PostCSS tasks running here.\");\r\n});<\/pre>\nvar gulp = require('gulp'),\r\n watch = require('gulp-watch');\r\n\r\ngulp.task('default', function() {\r\n console.log(\"Hooray- you created a Gulp task.\");\r\n});\r\n\r\ngulp.task('html', function() {\r\n console.log(\"Imagine something useful being done to your HTML here.\");\r\n});\r\n\r\ngulp.task('styles', function() {\r\n console.log(\"Imagine SASS or PostCSS tasks running here.\");\r\n});\r\n\r\ngulp.task('watch', function() {\r\n \r\n \/\/ watch takes two arguments:\r\n \/\/ 1. The file on our computer that we want to watch for saved changes to\r\n \/\/ 2. Anonymous function definition\r\n watch('.\/app\/index.html', function() {\r\n gulp.start('html');\r\n });\r\n\r\n \/\/ Create a second watch task that will watch all css files in the styles folder\r\n watch('.\/app\/assets\/styles\/**\/*.css', function() {\r\n gulp.start('styles');\r\n });\r\n\r\n});<\/pre>\ngulp watch<\/pre>\n
![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/gulp_watch_styles.png\")
<\/p>\n
\nhttps:\/\/www.npmjs.com\/package\/gulp-watch<\/a>
\nhttps:\/\/www.tutorialspoint.com\/gulp\/gulp_watch.htm<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"