windows7でNode.jsとnpmその4 windows7にgulpをインストールする

参考にさせて頂いたページ

5分で導入できる！タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB

gulp-imagemin

gulpをグローバルにインストールする

5分で導入できる！タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB

を参考にしながら進めていく。

node.jsのインストールは済んでいるので

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

からやっていく。

npm install -g gulp

を実行したら

> v8flags@1.0.8 install C:\Users\smotomichi\.nvmwv0.10.25\node_modules\gulp\node_modules\v8flags
> node fetch.js

C:\Users\smotomichi\.nvmwv0.10.25\gulp -> C:\Users\smotomichi\.nvmwv0.10.25\node_modules\gulp\bin\gulp.js
gulp@3.8.10 C:\Users\smotomichi\.nvmwv0.10.25\node_modules\gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.0
├── tildify@1.0.0 (user-home@1.1.1)
├── semver@4.2.0
├── v8flags@1.0.8
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.2, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5)
├── liftoff@0.13.6 (flagged-respawn@0.3.1, extend@1.3.0, resolve@1.0.0, findup-sync@0.1.3)
├── gulp-util@3.0.3 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, replace-ext@0.0.1, lodash.reinterpolate@3.0.1, lodash.reescape@3.0.1, lodash.reevaluate@3.0.1, vinyl@0.4.6, lodash.template@3.0.1, through2@0.6.3, multipipe@0.1.2, dateformat@1.0.11)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.5, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.0, mkdirp@0.5.0, through2@0.6.3, glob-stream@3.1.18, glob-watcher@0.0.6)

と表示された。

projectフォルダーを作成

とりあえずデスクトップにsample_projectフォルダを作成した。

そして

cd C:\Users\ユーザー名\Desktop\sample_project

で移動

package.jsonを生成する

npm init

を実行すると色々入力を促されるけど、とりあえず何も入力せずにenterを押していく。

最後にyesと入力してenterを押す。

sample_projectフォルダににpackage.jsonが生成された。

記述内容は、今のところ以下の通り

{
  "name": "sample_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulpをプロジェクトフォルダにインストールする

npmはグローバルインストールと、プロジェクトフォルダ毎のインストールと両方必要。

npm install --save-dev gulp

を実行した。

npm WARN package.json sample_project@1.0.0 No description
npm WARN package.json sample_project@1.0.0 No repository field.
npm WARN package.json sample_project@1.0.0 No README data
\


> v8flags@1.0.8 install C:\Users\smotomichi\Desktop\sample_project\node_modules\gulp\node_modules\v8flags
> node fetch.js

gulp@3.8.10 node_modules\gulp
├── interpret@0.3.10
├── pretty-hrtime@0.2.2
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.0
├── tildify@1.0.0 (user-home@1.1.1)
├── semver@4.2.0
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── v8flags@1.0.8
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── gulp-util@3.0.3 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, array-uniq@1.0.2, replace-ext@0.0.1, lodash.reinterpolate@3.0.1, lodash.reevaluate@3.0.1, lodash.reescape@3.0.1, vinyl@0.h.template@3.0.1, through2@0.6.3, multipipe@0.1.2, dateformat@1.0.11)
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.5, defaults@1.0.0, vinyl@0.4.6, strip-bom@1.0.0, through2@0.6.3, mkdirp@0.5.0, glob-stream@3.1.18, glob-watcher@0.0.6)

と表示されてインストール完了した。

このとき--save-devで実行しているので、以下の3行がpackage.jsonに追記された。

  "devDependencies": {
    "gulp": "^3.8.10"
  }

とりあえず今回はここまで。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。