何からはじめればいいの!? npmとかgulpとか黒い画面がわからない。

2017年6月18日

npmっていったいなんなの

フロントエンド系の集まりに行くと、
npmとかタスクランナーとかpugとか……そういった素敵なものをみんな使っているらしい。

npmって……npmってなんなの!

Node.jsをつかってみよう

Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツールです。

https://team-lab.github.io/skillup-nodejs/2/4.html

とりあえずまず全てはNode.jsから始まるらしい。

Node.jsを入れる

公式からダウンロードしよう

https://nodejs.org/ja/

作業用フォルダを作っておく

node.jsを、とりあえず、動かすことが先決

こんなかんじで上等。

黒い画面を呼ぶ

フォルダを移動する

これが結構難しい。移動できない。

これで移動できると思う。
移動というのは、黒い画面の行の最初の方、「>」のまえの部分のパスを、別のパス(今回は作業用フォルダのパス)に変えること。

package.jsonを生み出してみる

黒い画面で

と入れてみよう。

なにか入力を求められるのだけれども、とりあえずEnter、Enterと次の行に送っていく。

Is this OK ? (yes)

まで行ったらおわり。作業用フォルダにpackage.jsonが入っているはず。

ここまでで、このページの黒い画面の3つめが終わったところ。

gulpを入れてみる。

さっきの続きのままこの2つを、黒い画面で実行すればOK

 

パッケージのインストール

pugとsassとブラウザシンクを走らせたいので、
これでインストール。

作業用フォルダにgulpfile.jsを作る。

この場合は、

publicフォルダ(公開されるファイル)
┣cssフォルダ
┗index.html
pugフォルダ
scssフォルダ
package.json
gulpfile.js

こんなフォルダ構造想定。

pugとscssを入れておこう。

※htmlを1行詰め詰めにしたくないときは、
.pipe(pug()) を .pipe(pug({pretty: true})) に。

黒い画面でgulpを走らせる

黒い画面で、作業用フォルダを選んでいることを確認したら、実行。

publicフォルダが自動で生まれて、
コンパイルされたhtmlとcssが誕生していれば成功。

タスクが走った最初だと、うまく表示されなければ、一度ファイルを編集してみるといいかも。

初めて用pugテンプレ

 

次はこれ読む→Pugと仲良くする方法

追記:コンパイルエラー時にgulpを終了しない&autoprefixerつける

参考:http://yutapon.hatenablog.com/entry/2014/09/11/100000