subtechild

Playful Technology & Design.

ターミナルを1から10まで覚えたいわけじゃないノンプログラマーのための最も無駄のないGulp導入手順

f:id:nknkt:20161227210638j:plain

まず前提に...

この記事はほとんど自分向けメモです! Gulp導入の記事はあるけどもっと必要最低限の情報に絞られた記事が欲しいと思い自分で書きました。

この記事が役に立つかもしれない人

  • 以前一度でもGulpを導入したが手順を思い出すのがだるい
  • 今まで導入したことないが、JSとかコマンドラインとか深く知らんでいいからとにかく使いたいんや、早く!
  • コピペ!コピペ!コピペ!

では、淡々と書きます。

Gulp導入手順

Node,jsのインストール

サイトから落とす

https://nodejs.org/ja/nodejs.org

コマンドラインの起動

  • Windows:コマンドプロント
  • Mac:ターミナル

Node.jsのバージョンを確認する場合(必要なければとばして良い)

node -v

Gulpをグローバルにインストール

npm install -g gulp-cli

プロジェクトの初期設定をする

プロジェクトフォルダへ移動

Windowsの場合

cd C:¥Users¥MyName¥フォルダ名

Macの場合

cd /Users/MyName/フォルダ名

Macの場合cd ドラッグ&ドロップでも可能

package.jsonファイルを作成

npm init

プロジェクト名やらなんやら設定が出てくるから必要なら設定

私の場合MacOSでプロジェクト名に半角大文字を使っていてエラーが出ました(Windowsは知りません)、元々のプロジェクト名から変更しましょう。

プラグインをインストール

npm install --save-dev プラグイン名

プラグインはここで探す

www.npmjs.com

後でベタなやつを書いておくかも

gulpfile.js作って動かす

コピペ!自動化したいならwatch()忘れずに!

後でもうちょっと書くかも

今いるローカル環境にGulpをインストール

npm install --save-dev gulp

以上!!!

とりあえず使える準備はできるはず! ひたすら、コピペしたコマンド叩いてもらったらすぐだと思う。

Gulp自体の説明とか、もっと初期設置の細かな説明はググってみてみたらいいと思うんだ。

ここでも書きました! qiita.com