gulpチュートリアルフォルダを再帰的に監視し、LINEを送信するまで

Authors

Name
Shou Arisaka nyapp.buzz/shou
short bio
Z世代の情報技術者。Next.jsで自作SNSを個人開発中。

gulpの、インストールと基本的な使い方から、フォルダを再帰的に監視し、変化があればLINEを送信するまでやってみました。

contacamで動作感知し、動画を撮影し、自動でリモートサーバーにバックアップ。ここまでは一つのプロセスとしていいのですが、これにもう一つ、"すぐに知れたら良いな"、と思いまして、そのために以前一回だけ使ったことがあるっきりのgulpでやってみよう、と思い使ってみました。

とりあえずgulpを動かしたい人へ

以下のシェルスクリプトを参考にどうぞ。

mkdir gulp_dev; cd gulp_dev

npm install -g gulp # 初回だけ。

npm install -D gulp # or npm install --save-dev gulp # プラグインを使う時も npm install --save-dev gulp-uglify のようにする。
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

# gulp_devフォルダの中のファイルを変更して保存してみる

# =>
# => [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'...
# => 変更されたよ

スクリプトの説明

この前に、nodejsをインストールしていなければインストールします。:sudo apt install -y nodejs

mkdir gulp_dev; cd gulp_dev

ファイルを監視したいプロジェクトフォルダを指定します。今回は新規に作りました。

npm install -g gulp # 初回だけ。

システムにgulpをインストールします。

npm install -D gulp # or npm install --save-dev gulp # プラグインを使う時も npm install --save-dev gulp-uglify のようにする。

ローカルにgulpをインストールします。

npm init -y # create package.json

package.jsonという、gulpを動かすのに必要な設定ファイルを作成します。

cat << EOT > gulpfile.js
#scripts
EOT

gulpfileという、gulpのメインスクリプトを書くファイルを作成します。これを編集して、gulpとかプラグインとかを動かします。

エラー

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)

このエラーは、npm install -D gulpをしていない場合に起こります。

今回30分位ハマったのがこのエラー。

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

このエラーは、フォルダ名が"gulp"だと起こるようです。

調べてもわからなかったけどsameとか書いてあるし、勘で作業フォルダ名をgulp_devとかにしてやってみたら解決したって感じです。

gulpでコマンドを実行する

gulp内でbashコマンドを実行することも可能です。 child_processプラグインを使用します。

npm install child_process

以下はgulp watchで再帰的にフォルダを監視し、変化があれば上記同様標準出力をするとともに、pwdコマンドを実行する例です。 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"; //ここでメールを送信するスクリプトor音楽を鳴らすスクリプトを実行 for contacam
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

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

フォルダを再帰的に監視し、変化があればLINEを送信するgulpスクリプト

Line notifyのAPIを使って、LINEを送信するようにします。 YOURLINEAPIKEYを書き換えて使用してください。

結構無理矢理な再帰(物理)ですが、再帰的にっていうのは調べてもできこなかったので無理なんじゃないかと。一応こういうやり方でも相当ネストこじらせてない限り使えるので、これでやってますが。できるようならコメントで教えていただけるとうれしいです。

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 = ""; //ここでメールを送信するスクリプトor音楽を鳴らすスクリプトを実行 for contacam
  ps(command , function (err, stdout, stderr) {
    console.log(stdout);
  });
});

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

追記：再帰的できました。

こんな感じで、**でやるといいらしいです。

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

sass変換とかする際に、/sassだったりsrcだったり、assetsだったりでフォルダ名が違ったり、はたまた/src/sassとか2つフォルダ挟んでたりしてても、/**/*.sassで全てのフォルダの.sassを対象とできるので、この書き方は便利ですね。

フォルダを再帰的に監視し、変化があればメールを送信するgulpスクリプト

は、できませんでした。

mailコマンドとかpythonでメール送信とかも試してみたけどエラーしかでない…。

コマンドそのまま埋めればいいだけなので、できる人はそれでやってみたらできると思います。解決したら記事にします。

本当はメールで色々受信したほうが応用も効いて汎用性高いんですが、仕方ないのでLINE notifyを使ってます。同じように悩んでる人はLINE notifyおすすめです。

参考

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

gulpチュートリアルフォルダを再帰的に監視し、LINEを送信するまで

とりあえずgulpを動かしたい人へ

エラー

gulpでコマンドを実行する

フォルダを再帰的に監視し、変化があればLINEを送信するgulpスクリプト

フォルダを再帰的に監視し、変化があればメールを送信するgulpスクリプト

参考

Shou Arisaka

タグ ->

一つ前の記事 ->

次の記事 ->

とりあえずgulpを動かしたい人へ

エラー

gulpでコマンドを実行する

フォルダを再帰的に監視し、変化があればLINEを送信するgulpスクリプト

フォルダを再帰的に監視し、変化があればメールを送信するgulpスクリプト

参考

Shou Arisaka

関連記事もどうぞ！

タグ ->

一つ前の記事 ->

次の記事 ->