初めてGulpを触ってみた

はじめに

最近Web系のことを触り始めて、初めてgulpを使ってみたのでそのメモ。

gulpとは

gulp公式サイト
http://gulpjs.com/

javascript（nodejs)を利用したタスクランナー。
あらかじめ一連の動作をコマンドをトリガーに実行したり、ファイルを監視して変更をトリガーに実行することが可能。
例えば、javascriptの圧縮処理や、LESSからCSSへ書き出したり、HTMLでファイルが変更された時にブラウザをリロードさせることなどができる。

今回は単純にファイルを監視して更新があったときに特定の場所にコピーしてみた。

導入

node.jsのインストール

公式サイトよりnode.jsをダウンロード＆インストール。
https://nodejs.org/en/

npmからgulpをインストール

//グローバルインストール
npm install gulp -g

//アプリフォルダ内にもインストール(アプリ階層にて)
npm install gulp

gulpfile.jsを作る

gulpfile.js

//gulpの読み込み
var gulp = require('gulp');

//copytaskの作成
gulp.task("copytask", function () {
	 gulp.src("./src/*.html")
	.pipe(gulp.dest("./copy/"))
});

//監視の設定
//src内のhtmlファイルに変更があった場合copytaskを実行
gulp.task("watch", function () {
	gulp.watch("./src/*.html", ["copytask"]);
})

//デフォルトタスクに設定する
gulp.task("default",["watch"]);

実行するタスクはgulp.task()の中に記載する。
gulp.srcで対象となるファイルを指定する。
以降の操作は.pipeメソッドでメソッドチェーンを使って記載。
gulp.destは出力を意味する。

gulpの実行

コマンドプロンプトより

gulp

で実行。終了させるときはctrl+c

なお、Visual studio codeを使っている場合はコマンドパレット(ctrl+shift+p)より

task default

から実行可能