Gulp Tutorial: Monitoring Folders Recursively and Sending LINE Notifications

I tried gulp from installation and basic usage to recursively monitoring folders and sending LINE notifications when changes occur.

Using contacam for motion detection, recording videos, and automatically backing up to a remote server works well as a single process. However, I wanted to add "immediate notification", so I decided to use gulp, which I had only used once before.

For Those Who Want to Get Gulp Running Quickly

Please refer to the following shell script.

mkdir gulp_dev; cd gulp_dev

npm install -g gulp # Only for the first time.

npm install -D gulp # or npm install --save-dev gulp # When using plugins, use npm install --save-dev gulp-uglify like this.
npm init -y # create package.json
cat << EOT > gulpfile.js

var gulp = require("gulp");

gulp.task("change", function() {
  console.log("変更されたよ")
});

gulp.task("watch", function() {
  var targets = [
    './*'
  ];
  gulp.watch(targets, ['change']);
});

EOT

gulp watch

# Try changing and saving a file in the gulp_dev folder

# =>
# => [14:32:36] Finished 'change' after 317 μs
# => [14:32:38] Starting 'change'...
# => 変更されたよ
# => [14:32:38] Finished 'change' after 88 μs
# => [14:33:17] Starting 'change'...
# => 変更されたよ

Script Explanation

Before this, if you haven't installed Node.js, install it: sudo apt install -y nodejs

mkdir gulp_dev; cd gulp_dev

Specify the project folder you want to monitor files in. This time I created a new one.

npm install -g gulp # Only for the first time.

Install gulp to the system.

npm install -D gulp # or npm install --save-dev gulp # When using plugins, use npm install --save-dev gulp-uglify like this.

Install gulp locally.

npm init -y # create package.json

Create package.json, a configuration file necessary to run gulp.

cat << EOT > gulpfile.js
#scripts
EOT

Create gulpfile, the main script file for gulp. Edit this to run gulp and plugins.

Errors

root@DESKTOP-UHU8FSH:/mnt/c/pg/gulp# gulp
[14:04:31] Warning: gulp version mismatch:
[14:04:31] Global gulp is 3.9.1
[14:04:31] Local gulp is 1.0.0
module.js:538
    throw err;
    ^

Error: Cannot find module 'gulp'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/pg/gulp/gulpfile.js:1:74)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)

This error occurs when you haven't run npm install -D gulp.

I spent about 30 minutes stuck on this error.

root@DESKTOP-UHU8FSH:/mnt/c/pg/gulp# npm install -D gulp
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "gulp" under a package
npm ERR! also called "gulp". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-02-10T05_09_54_461Z-debug.log

This error seems to occur when the folder name is "gulp".

I couldn't find the answer through research, but it mentioned "same", so I tried renaming the working folder to something like gulp_dev and it worked.

Executing Commands with Gulp

You can also execute bash commands within gulp. Use the child_process plugin.

npm install child_process

The following is an example of using gulp watch to recursively monitor folders, and when changes occur, output to stdout as above and execute the pwd command. You can confirm the operation with gulp child_process_sample.

var gulp = require("gulp");
var ps = require('child_process').exec;

gulp.task("change", function() {
  console.log("変更されたよ")
});

gulp.task('child_process_sample', function() {
  var command = "pwd"; //Execute script to send email or play music for contacam
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

gulp.task("watch", function() {
  var targets = [
    './*/*/*/*/*/*',
    './*/*/*/*/*',
    './*/*/*/*',
    './*/*/*',
    './*/*',
    './*'
  ];
  gulp.watch(targets, ['change','child_process_sample']);
});

Gulp Script to Recursively Monitor Folders and Send LINE When Changes Occur

Use the Line notify API to send LINE messages. Replace YOURLINEAPIKEY and use it.

It's quite forceful recursion (physically), but I couldn't find a way to do it recursively through research, so I think it might not be possible. This method works fine unless you have extremely nested structures. If there's a way to do it, I'd appreciate it if you could let me know in the comments.

var gulp = require("gulp");
var ps = require('child_process').exec;

gulp.task("change", function() {
  console.log("変更されたよ")
});

gulp.task('child_process_sample', function() {
  var command = "pwd"; //
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

gulp.task('send_line', function() {
  var command = "curl https://notify-api.line.me/api/notify -X POST -H 'Authorization: Bearer <YOURLINEAPIKEY>' -F 'message=ファイルの変更がありました。 by gulp'"; /
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

gulp.task('send_mail', function() {
  var command = ""; //Execute script to send email or play music for contacam
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

gulp.task("watch", function() {
  var targets = [
    './*/*/*/*/*/*',
    './*/*/*/*/*',
    './*/*/*/*',
    './*/*/*',
    './*/*',
    './*'
  ];
  gulp.watch(targets, ['change','send_line']);
});

Update: I figured out how to do it recursively.

You can do it like this with **.

var targets = [
  // './*/*/*/*/*/*',
  // './*/*/*/*/*',
  // './*/*/*/*',
  // './*/*/*',
  // './*/*',
  './**'
];

When converting sass, even if folder names differ like /sass, src, or assets, or even with two folders like /src/sass, you can target all .sass files in all folders with /**/*.sass, so this notation is convenient.

Gulp Script to Recursively Monitor Folders and Send Email When Changes Occur

I couldn't make this work.

I tried using the mail command and Python email sending, but only got errors...

Since you just need to embed the command directly, those who can do it should try. I'll write an article if I solve it.

Actually, receiving emails would be more versatile and widely applicable, but I'm using LINE notify because I couldn't get it working. If you're struggling with the same issue, I recommend LINE notify.

References

http://phiary.me/gulp-watch/