hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

人がすでに作ったプロジェクト雛形で始めるgulp

いや、ちゃうねん。わてpreprossユーザー、彼gulpユーザー、もう既にpackage.jsonとかgulpfile.jsとか用意されてんねん

って時の話。
※ package.json…gulpの処理に必要なパッケージリストや、プロジェクトの基本情報などが入っている設定ファイル
※ gulpfile.js…gulpでタスクを走らせた時に実行される処理群を記述しておくJSファイル

インストールからプロジェクトの作成までのリファレンスはいっぱいあるけど
既に人が作ってるプロジェクトにてgulpを使いはじめるには?

1)nodeとgulpをインストールしておく

5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
https://ics.media/entry/3290/2
これの「3. package.jsonファイルの作成」までをやっとく

2)プロジェクトで必要なパッケージをローカルに入れる

プロジェクトのpackage.jsonがあるディレクトリ(ローカル)に移動する

$ cd [path to project directory]

gulpに必要なパッケージなどを追加する

npm – package.jsonでパッケージを一括インストール – Hyperper
https://hyperper.com/17

$ npm install

3)プロジェクトでgulpが動くようにする

プロジェクト内でgulpが動くように「ローカルにgulpをインストール」する
[2017-09-16]
これはいらんかも。最近やったことない。てか懐かしいなこの記事。preprossて。
[//2017-09-16]

$ npm install --save-dev gulp

4)gulpfile.jsの内容を実行させる

$ gulp

エラーが出なかったらタスクが開始されてる。
通常は(多分)watchでファイル監視する関数とかも入ってるはずなので
これで作業が開始できる

5)オマケ 彼が読み込んでるパッケージが古いよって npm installのときにメッセージが出る場合

「このコマンド書き方変わったよ」
「このパッケージもうメンテされていないから新しい名前のこれDLして使ってね」

インスコ中にそんな情報が出た場合
こうするといいらしい

$ npm install -g npm-check-updates
$ ncu -u
$ npm install

package.jsonのパッケージを最新のバージョンにアップデートする – Qiita
http://qiita.com/kiyodori/items/974cfeecbb2f69a576f7

実際にやったら追記します。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください