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

    >

プログラミングは、進む時は面白いぐらいに進むのに、詰まる時はとことん詰まる。そしてそのままフェードアウト…といったことはよく聞く話です。僕もHTMLから始めて、長いことプログラミングを続けてきましたが、どうしても自分の思い通りにいかない、実装ができない、エラーが続く、といった状況に悩まされ、うつ状態になり、もういっそプログラミングなんて辞めてしまおうか…と挫折しそうになった経験が、幾度となくあります。

プログラミングを6年続けてきて、プログラミングは自分一人で完結できるものではない、ということは痛いほど分かっています。"スタックオーバーフロー"だけではどうしようもないことも、中にはあります。 特に、新しい技術や言語に挑戦しようとする時は、難関が数多くあります。JavaとPHPは違いますし、スマホアプリが作れるからと言ってPythonができるとは限りません。多くの場合、多くの障壁に立ち塞がることでしょう。

実際、僕も多くのプログラミングをしている友人から、あらゆる相談を受けます。既存の回答や僕の知識から、最適な答えを返してあげられることもありますが、答えられないことや上手く説明できないことも多くあります。
そのような場合、僕が彼らに勧めているのが、『TechAcademy [テックアカデミー]』です。

同サービスは短期間から登録できるオンライン完結のプログラミングスクールで、他社と比較しても、そのコストパフォマンスは圧倒的です。
例えば、A社は148,000円〜のところ、同サービスは99,000円〜でコースが受講できます。( ※はじめてのプログラミングコース4週間の料金 )
また、一言に現役のプロと言っても、エンジニア歴20年以上、プログラム歴35年以上といった、まさにプロ中のプロの方たちが対応してくれるのも、『techacademy』の魅力の一つ。

国内外どこからでもチャット相談が可能で、毎日8時間、1週間あたり57時間の間、メンターが常時待機しています。
受講生限定の転職サポートで、コース受講終了後、企業やコンサルタントからスカウトが届く"TechAcademyキャリア"も、ぜひ活用したいところです。

  • オリジナルアプリをAppStoreにリリースするまで徹底サポート「iPhoneアプリコース」
  • 職業を問わず身につけたい、教養としてのプログラミングが学べる「はじめてのプログラミングコース」
  • 仮想通貨を支えるブロックチェーン技術の仕組みを学べる「ブロックチェーンコース」
  • Pythonと機械学習が学べる「Pythonコース」

『techacademy』では、上記コースをはじめとした、数多くの特化したコースが受講受付中です。プログラミングの進捗に真剣に悩んでいる方は、ぜひご活用ください。

TechAcademy [テックアカデミー]

さて、おまたせしました。

今回の記事は『gulpチュートリアル フォルダを再帰的に監視し、LINEを送信するまで』です。この記事が役に立った、と思ったらぜひ、コメントまたはTwitterやLINEでシェアしてくださいね。


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

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


僕もそうですが、フリーのプログラマの仕事内容は様々です。ソフトウェアを受注製作することもあれば、企業ホームページを作ることもあるでしょう。
どういったビジネスを展開するにせよ、事業を成功させるには、正しいマーケティングを行うことは必須事項です。

ミツモア』は、Googleのリスティング広告やマーケティング広告管理に煩わされることなく、狙った顧客を獲得できる、マーケティングプラットフォームです。
僕のプログラマの友人がいるのですが、彼にも『ミツモア』を紹介し、彼は現在、成功したプログラマの一人です。
どうしても疎かになってしまいがちなマーケティングですが、『ミツモア』を上手く活用し、新たな新規顧客を獲得していきたいところですね。

ミツモア

とりあえず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おすすめです。

参考

[get_title http://phiary.me/gulp-watch/]


2020年の東京五輪を間近に控え、来日外国人の数は年々増加しています。ただでさえ、あらゆる職種で"英語力"が求められる時代ですが、その中でも特筆してプログラマ、システムエンジニアには、英語力は必須であると言われています。

僕は現在、英検1級に着手し、英語力が一定水準に達した今でも、日々新しい表現や単語を学んでいます。しかし僕も最初から英語が出来たわけではありません。中学生の頃の英語の成績は、学年でほぼビリでしたし、そもそも英語なんて必要ない(若者の常套句ですね)、今後一生やることはない、と思っていたくらいです。

確かに、英語を使わずとも年収600万以上の仕事に就くことは出来ますし、生活する上で困ることもないでしょう。しかしそれは、英語を知っている世界を知らないからでしかありません。
英語に興味関心がない多くの方は、こういうことを言うと反発するのですが、プログラミング経験者の皆さんなら、そうでもないのではないでしょうか。

プログラミングをやっていて、英語が出来たらなぁと思ったこと、あるのではないでしょうか。僕が英語を始めた動機は他にありますが、一度、二度挫折した英語学習を再開する動機となったのは、紛れもなく、"プログラミング"でした。プログラミングを続けるには、英語の壁を超える必要がある、と幾度となく痛感しました。

  • エラー文章をGoogle検索せずとも理解できる
  • ソースコードに日本語が含まれる場合に起こる特有のエラーを回避できる
  • スタックオーバーフローの回答が理解できる
  • スタックオーバーフローに質問を投稿し、良質で的を射た回答を得ることができる
  • 翻訳されていないドキュメントやリファレンスを理解できる
  • 適切なメソッド名やファイル名をスムーズに定義できる
  • 需要が高く報酬の良い海外で仕事が探せる、または海外のクライアントを相手にできる

上記をはじめとした、プログラミングにおいて英語ができることのメリットは数多く存在します。
英語学習の必要性に疑問を持っていた方も、上記の一覧を見て、何か思うことがあるかもしれません。しかし、英語を学習する意義を見つけたあと、間違っていけないのが、その学習方法です。

英語学習方法には効率的、非効率的、意味がないなど、様々な方法が乱立しています。中には悪徳なものもあり、注意が必要です。
英語学習に回り道やチートはありませんが、効率的でない学習方法を避けて学習を進めていくことは、1年後、5年後の自分の英語力に取り返しのつかない差が開いてしまうことを未然に防ぎます。

そして、僕が一番信頼を置いているのが、『スタディサプリ ENGLISH』です。『スタディサプリ ENGLISH』はこれまで様々な英語に関する相談をしてきた友人への、最も勧める頻度の高かったサービスです。

留学が間近で…、ワーキングホリデーに行ってみたくて…、やっぱり英語をまた始めようと思って…、社内公用語対策で…、英会話教室に通おうと思ってて…などなど、僕への相談は様々ですが、これら全ての方に、『スタディサプリ ENGLISH』は自信を持っておすすめできます。

スタディサプリ ENGLISH

さて、最後までお読み頂きありがとうございました。この記事が役に立った、と思ったらぜひ、コメントまたはTwitterやLINEでシェアしてくださいね。

僕は個人事業として、プログラミング6年、1日14時間パソコン業務をこなしてきました。現在もウェブサイト開発やサポート、ソフトウェア制作、レビューなどライティングをはじめとしたお仕事を承っております。気になったらぜひ、メールにてご連絡ください。いつでもお待ちしております。

現在承っているお仕事の一覧
お問い合わせ

小山はるや(こやまはるや) 東京生まれ。プログラマー。現役大学生。ウェブサイト制作の傍らメディア運営を行い、2017年に開設されたITブログ『yuipro』(https://yuis-programming.com)は2019年に月間アクセス数1万を超える。 これまで80を超えるウェブサイトを制作、小山氏自ら運営するウェブサイトは8つに上り、うち2つが月当たり数万のアクティブビジターを獲得している。


Close Menu