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

More than 1 year has passed since last update.


まず前提に...

この記事はほとんど自分向けメモです!

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


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


  • 以前一度でもGulpを導入したが手順を思い出すのがだるい

  • 今まで導入したことないが、JSとかコマンドラインとか深く知らんでいいからとにかく使いたいんや、早く!

  • コピペ!コピペ!コピペ!

では、淡々と書きます。


Gulp導入手順


Node,jsのインストール


サイトから落とす

Node.js


コマンドラインの起動


  • 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 プラグイン名


プラグインはここで探す

gulp

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


gulpfile.js作って動かす

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

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


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

npm install --save-dev gulp


以上!!!

とりあえず使える準備はできるはず!

ひたすら、コピペしたコマンド叩いてもらったらすぐだと思う。

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