gulp（ガルプ）の利用について 忘備録

参考にさせていただきました。

https://dotinstall.com/lessons/basic_gulp

gulp とは

SCSSなどで記述すると、コンパイルしてCSSにする必要がある。
多少の変更でもコンパイルするのはめんどくさい。 それで、保存した時のタイミングで自動的に、コンパイル処理を走らせたりする。 それをタスクラナーという。

本家サイト

gulpjs.com

環境周りの知識

gulpはnode.jsのパッケージの一つ
node.jsはサーバー再度で動くJavaScript言語の一つと考えておくとよい。
よってnode.jsのインストールが必要。
node.jsのパッケージマネージャーの npmもインストールする。

//gulpをグローバルにインストールする。

sudo npm install gulp -g

$ gulp -v

//==
CLI version: 2.2.0
Local version: Unknown

バージョンが表示されたのでインストールされている

//gulpのインストール
$sudo npm install gulp

//バージョン確認
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.1

package.json へ書き込んでいくのでそれを作成

プロジェクトのディレクトリにいって これでひな形を作成してくれる

npm init

//対話型で作っていく。

できている

gulpファイルも必要なので

//--save-devのオプションで先ほど作成した　package.json　へこのgulpファイルを利用するんだよと書き込んでくれる
npm install --save-dev gulp

node_modulesのフォルダの中に gulpがインストールされている

package.jsonは大切。これがあるフォルダで npm install をするとまとめてモジュールをインストールしてくれる。

gulpで実行するファイルは gulpfile.js に記載していく ポイント

これは必須
var gulp = require('gulp');

//task関数　第一引数：関数名、第二引数　処理したいこと
//呼び出しは gulp hoge
gulp.task('hoge', function() {
    console.log('hello world!');
});

//デフォルトを設定
gulp.task('default', ['hoge']);

gulpの監視

特定のファイルに変更があった場合、taskを走らせるもの　gulp.watch 定義

//ここでインスタンスにする
const  glap  = require('gulp');


watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});

//書き方
watch(globs, [options], [task])


- 第1引数
文字列、配列
監視するファイル
-第2引数　配列

第3引数
配列
実行するタスク

ブラウザをリロードする。

特定の変更があったときに、ブラウザを自動でリロードするようにする。 必要なもの

• ip address 　ローカルで開発している場合普通はlocalhost

ip a で調べられる

//web-serverをインストール

npm install --save-dev gulp-webserber

実装

const webserver = require('gulp-webserver');

//監視対象を.src配下の全てのhtmlにした
gulp.task('watch', function() {
    gulp.watch('./src/*.html', ['html'])
});

//
gulp.task('webserver', function() {
  //ファイル場所は./dist
  gulp.src('./dist')
        //つなげる
        .pipe(
　　　
            webserver({
                //IPアドレス
                host: '192.168.39.42',
                //リロード設定
                livereload: true
            })
        );
});

//デフォルトで今設定した関数 webserver を実行するようにする
gulp.task('default', ['webserver']);