コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

妖怪ウォッチが流行っているようなのでガルプウォッチというものをやってみる

gulp
ガルプウォッチとは

おそらくですが、なにかキャラクターっぽいものが印刷されたメダルをつかって「でてこい！俺の友達”***”」と叫んでなんかを召喚する子供たちの間で大人気のメディアだと思われます。ちなみに僕はジバニャン好きです。


はい、というわけでWebで何か作るのに役立つツールということで気になってはいたけども使う機会がなかったから、今まで触れてこなかったgulpというツールの監視機能をつかってみたというお話をします。

What is gulp?
・Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
・Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
・Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations
・Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use


公式より適当訳

gulpについて
・自動処理
- gulpは開発の流れで時間のかかるタスクを自動化するのに便利なツールキットです。
・プラットフォームに依存しない
- PHP、.Net、Node.js、Javaなどのgulpが使えます
・圧倒的な環境
- 2000を超えるプラグインが提供されています。
・シンプル
- gulpは簡単に学ぶことができるように設計されています。

EcoSystemってなんて解釈したらいいんだろう…。生態系のことだよっていうツッコミやIT用語でエコシステムってあるからってツッコミはやめてね。この概念自体がふわっとしていて僕にはさっぱりなんですよ。


そんな役立つツールのgulpの公式はこちら
gulp.js

準備編

まずはgulpを利用するためにnpm install -g gulpでgulpをインストールします。で、インストールしたらgulp --versionで確認します。

[time] CLI version 3.9.1

[time] Local version 3.9.1
なんか、2つあるんですけど…。とりあえずこれは気になるところだけど、詰まった時にまた調べるとして先に進みます。


さて準備として次のような糞サイトと監視に使うgulpfile.jsを作成します。両ファイルは同一の階層に設置して同フォルダにまとめて準備完了です。


糞サイト（index.html）

<!DOCTYPE html>
<html>
<head>
 <title>なによりもすばらしい糞サイト</title>
</head>
<body>
 <h1>こんにちは<h1>
</body>
</html>

いわゆる、HTML版ハローワールドです。ただウォッチがしたいだけなので余計なことはしません。



gulpfile.js

var gulp = require("gulp");

gulp.task("watch", function() {
  gulp.watch("index.html", function() {
    gulp.src("index.html")
      console.log("Big Brotherが変更を確認しました。");
  });
});

監視したい時のgulp設定です。若干長ったらしいですがほぼお作法だけで書ける。


・雑解説
　var gulp = require("gulp");
　おまじない、gulp使うという宣言みたいなものだと思う。

　gulp.task("タスク名", 実行する処理);
　gulp タスク名を使うためのおまじない。

　gulp.src("取得するファイル")
　対象のファイルを取得します。今回は作成した糞サイト変更を確認するため糞サイトのファイルを取得します。

　

準備が出来たので、早速使ってみます。npm initとか知りません、ぼっちプレイソロ開発には不要だよね。
それでは、gulp watchで監視を開始します。

[time] Local gulp not found in ~***

[time] Try running: npm install gulp
……怒られた。npm install gulpを試してくださいだそうです。

怒られたので、しぶしぶnpm install gulpをします。
最新版使えみたいな警告がいろいろとでてきましたが、構わず進めます。行き詰まったら考えます。

二度目のgulp watchで監視をしていきます。
f:id:andron:20161225130303p:plain

お、なんかうまく行ってるっぽいですね。ではindex.htmlファイルを変更します。
f:id:andron:20161225130541p:plain
無事、監視されていることが確認できました。Big Brother is watching you...。

いやー、無事監視できました。
本来はこんな用途で使うものじゃないと思うけどね。最小限の環境さえ作れればあとは応用だけなので多少はね？処理に関してはpipe()やなんかを使うことでもっと色々できるらしいですよ。ただ、これ単体で利用するにはメリットが薄い気がする。本来はSassやCoffeeScriptなどのコンパイル前提の環境で自動化していくらしいので、先にそちらの書き方を覚えないといけないっぽいですね。

[トップへ]