なぜコマンドラインを使うの？

コマンドラインとはマウスを使わずに、キーボードだけの操作を指します。 PCへの命令コマンド する　入力行ラインですね。 コマンドラインはアプリケーション（コマンドラインツール）を使って実行します。

フロントエンドエンジニア中級まではPHPのバージョンをMAMP（XAMPP）などのアプリケーションを使うことで管理してきました。
上級になるとNode.jsやPython、JAVAなどを扱っていきますが、これらの言語のインストールやバージョンアップするのに便利なのが「パッケージマネージャー」です。
上級者はPHPやMySQLもMAMP（XAMPP）を使わずにパッケージマネージャーで管理します。

コマンドラインツールで「パッケージマネージャー」をインストールしたり、そのパッケージマネージャーからプログラミング言語をインストール、アプリの実行をしていきます。

CLIとGUIの違い

CLI（Command Line Interfaceコマンドラインインターフェース）とは文字でPCに命令を出す手法で、 下記のように画面上で命令文を打ち込み、ファイル操作やプログラムの実行を行います。
※コマンドはJavascriptで学んだメソッドのようなものと思ってもらえれば大丈夫です。

GUI（Graphical User Interfaceグラフィカルユーザーインターフェース）とは、普段私たちがマウスやキーボードで画面を操作していることをさします

現在ほぼ全てのPCがGUIで操作していますが、上記で紹介した仕事効率化ソフトのインストールや操作をするときはコマンドラインで操作することがありますので今のうちに慣れておきましょう。

コマンドラインツールを起動する

早速コマンドラインツールを起動してみましょう。
MacとWindowsでは起動方法が異なるのでそれぞれの方法で起動してください。

▼ Macの場合
アプリケーションフォルダのユーティリティの中から「ターミナル」をダブルクリック

▼ Windowsの場合
【Win(Windowsマーク)+R】で「ファイル名を指定して実行」機能を起動して下記を入力しましょう。

cmd

Windowsはこれだけで起動します。

コマンド画面の見方

ターミナルを起動すると以下の画面が出ると思います。
※画面と文字の色に関しては設定によるものなので同じでなくて問題ありません。

実際に打ち込んでいくのはメソッドと引数の部分になります。
PC名、ディレクトリ、ユーザ名の部分はなにが表示されているかが分かっていれば問題ありません。

タスクランナーとは？

タスクランナーとはある作業を自動で処理することができるようになるツールです。
例えばsassからcssへのコンパイルやHTML文章の整形、 Javascriptのデバッグなどを自動で行ってくれます。
タスクランナーが世に出るまではこれらの作業を全て手動で行う必要がありましたが、 タスクランナーを使用することで自動で処理することができるようになり作業時間を大幅に削減することが可能になりました。
さらにはプロジェクトや個人の好みに応じて、自由に処理する機能を自由にカスタマイズが可能です。
一番有名なタスクランナーで、gulp.jsガルプ ジェイエスというものがありますので今回はgulp.jsを使って処理を自動化してみましょう。

gulp.jsをインストールには前の項目でインストールしたNode.jsを使用します。

インストールはnpmエヌ ピー エムコマンドで行う

npmとはNode Package Managerノード パッケージ マネージャーの略称で Node.jsであらかじめ用意されている便利な機能を管理するためのツールです。「#1 コマンドラインを使おう」で説明した、

1. 「パッケージマネージャー」をインストール
2. パッケージマネージャーからプログラミング言語をインストール、アプリの実行

上記の操作はnpmコマンドを打ち込んで実行していきます。

gulp.jsのインストール

今回はLAMP環境を構築するときに作ったstgフォルダにインストールして、どのプロジェクトでもgulpを使えるようにしていきましょう
まずはコマンドラインツールを起動してstgフォルダに移動します。コマンドでフォルダを移動するには cd（チェンジディレクトリ）コマンドを使います。

cd stgフォルダまでのパス

上記のように移動したいフォルダをコマンドラインツールにドラッグ&ドロップすると自動的にパスが設定できます。
道順が設定できたら、Enterを押してディレクトリを移動しましょう。
stgフォルダに移動できたら、下記コマンドを打ち込みましょう。

npm init -y

上のコマンドではプロジェクトの情報が記載された「Pacakage.jsonパッケージジェイソン」というファイルを作成しています。 jsonファイルとはジャバスクリプト オブジェクト ノーテーションルビ部分という単語の頭文字を取って命名されたファイルのことですが。ここでは簡単に、データを書き込めるテキストファイルと覚えておきましょう。
コマンドを打ち込んだら、stgフォルダを確認しましょう、Pacakage.jsonファイルができているはずです。
特に直接編集することはないので、プロジェクト情報が載ったファイルが作られたんだなと思っていただければ問題ありません。
確認できたら、いよいよgulpをインストールします。

npm install -g gulp /* グローバルインストール(PC全体のイメージ) */

npm install -D gulp /* ローカルインストール(フォルダ内にインストール) */

stgフォルダを確認して、下記がインストールされていれば成功です。

1. node_modulesノードモジュール：Node.jsのパッケージを格納する保管庫です。
2. package-lock.jsonパッケージロックジェイソン：プロジェクトにどんなパッケージがインストールされたか記録されています

２つのファイルが確認できたら、下記コマンドを打ち込んで確認します。

gulp -v

gulpが正常にインストールされていればgulpのバージョンが表示されます。

ここまでで、gulpのインストールは完了です。
次からは実際に自動化する処理を書き込んでいきましょう。

ブラウザ自動リロードとサーバに自動アップロード

CBCの入門、基礎編でHTML/CSSコーディングをしていた時は

1. HTML、CSSファイルを編集
2. ファイルを保存
3. ブラウザに移動
4. ブラウザをリロードして反映を確認

のような手順を行なっていました。
さらに実務では、この手順に加えてFTPソフトを使って、テストサーバにファイルをアップロードして
03と04を行います。
全て手作業でというのは時間効率が悪くなってしまいます。
インストールしたgulpを使い、以下のタスクを作成してみましょう。
・ファイルが更新されたら、ブラウザを自動でリロード
・コマンドを叩いたら、特定のファイルをアップロード

プロジェクトフォルダの準備

stgフォルダに「template」というフォルダを作り中身にレストランのレスポンシブ対応したファイルをコピーします
ここでgulp環境のテンプレートを作成して、MAMP(XAMPP)管理するものが増えても、gulpを使えるようにしてみます。

stg
└ template  NEW!
　 ├ css
　 │ └ style.css
　 ├ img
　 │ └ 画像ファイル
　 └ index.html

templateフォルダにgulpプラグインをインストール

処理を自動化するためにプラグイン(機能)をインストールします

cd templateフォルダまでのパス

/** ↓↓↓↓↓↓↓↓↓ **/

npm install --sav-dev browser-sync gulp-ftp

このコマンドでbrowser-syncブラウザーシンクと gulp-ftpガルプエフ ティーピーの2つのプラグインをインストールします。 ここまで出来たら、次は実際にタスクを書いていきます。

gulpfile.jsの作成

gulpfile.jsとはgulpで行う命令を書き込むためのファイルです。
書き方はJavascriptで記入していきます。
プロジェクトフォルダのpackage.jsonファイルと同じ場所に新規ファイルでgulpfile.jsを作成します。

stg
└ template
　 ├ css
　 │ └ style.css
　 ├ img	
　 │ └ 画像ファイル
　 ├ index.html
　 ├ package.json
　 └ gulpfile.js	NEW!

gulpfile.jsを作成したら、早速タスクを書いていきます。

var gulp = require('gulp');
var browser = require('browser-sync').create();

/* ローカルサーバを立ち上げるタスク */
gulp.task('server', function (done) {
  browser.init({
   server: {
    baseDir: "../template",
    index: 'index.html'
   }
  });
  done();
});

/* ファイルを監視するタスク */
gulp.task('watch', function(done) {
 gulp.watch("*.html", gulp.task('browser-reload'));
 gulp.watch("*/*.css", gulp.task('browser-reload'));
 gulp.watch("*/*.js", gulp.task('browser-reload'));
 done();
});

/* ブラウザを自動リロードするタスク */
gulp.task('browser-reload', function(done) {
 browser.reload();
 done();
});

/*デフォルトで起動させるタスク*/
gulp.task('default', gulp.series('server', 'watch', function(done) {
 done();
}));

gulpfile.jsの解説

変数を宣言して、gulpプラグイン(機能)を読みこむ

/** gulpという名前の変数にgulpのを読み込んでいます。 **/
var gulp = require('gulp');

/** browsersyncという名前の変数にbrowser-syncプラグインを読み込んでいます。 **/
var browsersync = require('browser-sync');

/** gulpsftpという名前の変数にgulp-ftpプラグインを読み込んでいます。 **/
var gulpsftp = require('gulp-ftp');

ローカルサーバを立ち上げるタスクを記述

/** タスク名をserverという名前にする **/
gulp.task('server', function (done) {

 /** broser-syncの設定 **/
 browser.init({

	/** ローカルサーバの設定 **/
  server: {

   /** templateフォルダをルートにする **/
   baseDir: "../template",

   /** templateフォルダ内のindex.htmlを初期表示 **/
   index: 'index.html'
  }
 });

 /** タスク終了の合図 **/
 done();
});

ブラウザをリロードするタスク

/** タスク名をbrowser-reloadという名前にする **/
gulp.task('browser-reload', function(done) {

 /** ブラウザをリロード **/
 browser.reload();

 /** タスク終了の合図 **/
 done();
});

ファイルを監視するタスク

/** タスク名をwatchという名前にする **/
gulp.task('watch', function(done) {

 /** 拡張子が.htmlのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("*.html", gulp.task('browser-reload'));

 /** cssフォルダ内の拡張子が.cssのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("css/*.css", gulp.task('browser-reload'));

 /** jsフォルダ内の拡張子が.jsのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("js/*.js", gulp.task('browser-reload'));

 /** タスク終了の合図 **/
 done();
});

gulp起動時に行うタスク

gulp.task('default', gulp.series('server', 'watch', function(done) {done();}));

/** ↓↓↓↓ 分解 ↓↓↓↓ **/

/**
タスク名をdefaultという名前にする。
※defaultはgulp側で決められているタスク名です。
**/
gulp.task('default',

  /** serverタスク、watchタスクの順番でタスクを起動する。 **/
  gulp.series('server', 'watch', function(done) {

  /** タスク終了の合図 **/
  done();
}));

gulpの起動

タスクを書いたらコマンドを叩いて、gulpを起動します。

gulp

wainashimotonoiMac:template y.nashimoto$ gulp

[02:58:05] Using gulpfile ~/stg/template/gulpfile.js
[02:58:05] Starting 'default'...
[02:58:05] Starting 'server'...
[02:58:05] Finished 'server' after 7.2 ms
[02:58:05] Starting 'watch'...
Server was launched
[02:58:05] Finished 'watch' after 10 ms
[02:58:05] Starting ''...
gulp watch started
[02:58:05] Finished '' after 372 μs
[02:58:05] Finished 'default' after 19 ms
default all task done!
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.3:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: ../template

起動すると、ブラウザに自動で画面が表示されます。
ファイルを編集、保存して自動リロードされるか確認してみましょう。

これでブラウザの自動リロードのタスクは完成しました。
次はサーバに自動でアップロードするタスクを作っていきます。

gulpfile.jsに自動アップロードのタスクを追記

var gulp = require('gulp');
var browser = require('browser-sync').create();

/** 追記 **/
var ftp = require('gulp-ftp');

/** 追記 **/
gulp.task('upload', function (done) {
 return gulp.src([
  '../template/*.html',
  '../template/**/*.css',
  '../template/**/*.js'
 ])
 .pipe(ftp({
   host: 'ホスト名',
   user: 'ユーザ名',
   pass: 'パスワード',
   remotePath: '/****/****/'
  })
 );
});

/* ローカルサーバを立ち上げるタスク */
gulp.task('server', function (done) {
  browser.init({
   server: {
    baseDir: "../template",
    index: 'index.html'
   }
  });
  done();
});

/* ファイルを監視するタスク */
gulp.task('watch', function(done) {
 gulp.watch("*.html", gulp.task('browser-reload'));
 gulp.watch("**/*.css", gulp.task('browser-reload'));
 gulp.watch("**/*.js", gulp.task('browser-reload'));
 done();
});

/* ブラウザを自動リロードするタスク */
gulp.task('browser-reload', function(done) {
 browser.reload();
 done();
});

/*デフォルトで起動させるタスク*/
gulp.task('default', gulp.series('server', 'watch', function(done) {
 done();
}));

追記の解説

/** ftpという名前の変数を作り、gulp-ftpを読み込んでいます。**/
var ftp = require('gulp-ftp');

/** uploadという名前のタスクを設定 **/
gulp.task('upload', function (done) {
 
 return gulp.src([

  /** template内の拡張子がhtmlのファイルを検索 **/
  '../template/*.html',

  /** template内のフォルダ内、拡張子が.cssのファイルを検索 **/
  '../template/**/*.css',

  /** template内のフォルダ内、拡張子が.jsのファイルを検索 **/
  '../template/**/*.js'
 ])

 .pipe(ftp({

   /** アップするサーバ情報 基礎で自分のフォルダを作った方のサーバ情報を記載 **/
   host: 'ホスト名',
   user: 'ユーザ名',
   pass: 'パスワード',

   /** アップするディレクトリ **/
   remotePath: '/****/****/'
  })
 );
});

サーバ情報の書き方について

サーバ情報ですが、今回はファイルに直接書かれていますが、その状態だと第3者に閲覧されてしまう可能性があります。
防ぐための手段として、別ファイルでjsonファイルを用意し、そこに記述する手法があります。
web制作をする際はこういったセキュリティも考えて作る必要があること覚えておきましょう。
ここまでタスクが記述できたら、コマンドを叩いて
・htmlファイル
・cssファイル
・jsファイル
3種類のファイルをサーバにあげてみましょう。

gulp upload

ファイルがサーバに上がったら、実際にURLを表示させてみましょう。