gulpがよくわかりません。POSTCSSが使いたいので下記を参考にやってみたのですが下記のソースのようになります。

Question

gulpがよくわかりません。POSTCSSが使いたいので下記を参考にやってみたのですが下記のソースのようになります。

http://creator.dwango.co.jp/5146.html

tynypngは何とかできたのですが、これは、新しいフォルダを作って新しいものを使うたびに毎回
そのフォルダ上でnpm install gulp-postcss --save-devを実行しないといけないものなのでしょうか？

gulpのファイルそのものがどれなのかなど解説が見当たりません。

C:\Users\user\Desktop\images\gulp-folder\node_modules\gulp-tinypng-compress>gulp update
(node:4948) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:02:59] Using gulpfile ~\Desktop\images\gulp-folder\node_modules\gulp-tinypng-compress\gulpfile.js
[15:02:59] Task 'update' is not in your gulpfile
[15:02:59] Please check the documentation for proper gulpfile formatting

C:\Users\user\Desktop\images\gulp-folder\node_modules\gulp-tinypng-compress>npm install gulp-postcss --save-dev
npm WARN update-linked node_modules\gulp needs updating to 3.9.1 from 3.9.1 but we can't, as it's a symlink
gulp-tinypng-compress@1.2.1 C:\Users\user\Desktop\images\gulp-folder\node_modules\gulp-tinypng-compress
`-- gulp-postcss@6.1.1
  +-- gulp-util@3.0.7
  | +-- array-differ@1.0.0
  kara
  `-- vinyl-sourcemaps-apply@0.2.1


C:\Users\user\Desktop\images\gulp-folder\node_modules\gulp-tinypng-compress>cd C:\Users\user\Desktop\images\gulp-folder\postcss

C:\Users\user\Desktop\images\gulp-folder\postcss>gulp
[15:33:28] Local gulp not found in ~\Desktop\images\gulp-folder
[15:33:28] Try running: npm install gulp

C:\Users\user\Desktop\images\gulp-folder\postcss>npm install ==save-dev gulp
npm ERR! addLocal Could not install C:\Users\user\Desktop\images\gulp-folder\==save-dev
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "==save-dev" "gulp"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! path C:\Users\user\Desktop\images\gulp-folder\==save-dev
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\user\Desktop\images\gulp-folder\==save-dev'
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\user\Desktop\images\gulp-folder\==save-dev'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\user\Desktop\images\gulp-folder\postcss\npm-debug.log

C:\Users\user\Desktop\images\gulp-folder\postcss>npm install --save-dev gulp
npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN update-linked node_modules\gulp-tinypng-compress\node_modules\gulp needs updating to 3.9.1 from 3.9.1 but we can't, as it's a symlink
gulp-folder@1.0.0 C:\Users\user\Desktop\images\gulp-folder
`-- gulp@3.9.1
  +-- archy@1.0.0
  +-- deprecated@0.0.1
  +-- interpret@1.0.1
  +-- liftoff@2.2.1
  | +-- extend@2.0.1
  | +-- findup-sync@0.3.0
  | | `-- glob@5.0.15
  | |   +-- inflight@1.0.5
  | |   `-- path-is-absolute@1.0.0
  | +-- flagged-respawn@0.3.2
  | +-- rechoir@0.6.2
  | `-- resolve@1.1.7
  +-- orchestrator@0.3.7
  | +-- end-of-stream@0.1.5
  | | `-- once@1.3.3
  | |   `-- wrappy@1.0.2
  | +-- sequencify@0.0.7
  | `-- stream-consume@0.1.0
  +-- pretty-hrtime@1.0.2
  +-- semver@4.3.6
  +-- tildify@1.2.0
  | `-- os-homedir@1.0.1
  +-- v8flags@2.0.11
  | `-- user-home@1.1.1
  `-- vinyl-fs@0.3.14
    +-- defaults@1.0.3
    +-- glob-stream@3.1.18
    | +-- glob@4.5.3
    | +-- glob2base@0.0.12
    | | `-- find-index@0.1.1
    | +-- ordered-read-streams@0.1.0
    | +-- through2@0.6.5
    | | `-- readable-stream@1.0.34
    | `-- unique-stream@1.0.0
    +-- glob-watcher@0.0.6
    | `-- gaze@0.5.2
    |   `-- globule@0.1.0
    |     +-- glob@3.1.21
    |     | +-- graceful-fs@1.2.3
    |     | `-- inherits@1.0.2
    |     +-- lodash@1.0.2
    |     `-- minimatch@0.2.14
    |       +-- lru-cache@2.7.3
    |       `-- sigmund@1.0.1
    +-- graceful-fs@3.0.8
    +-- mkdirp@0.5.1
    | `-- minimist@0.0.8
    +-- strip-bom@1.0.0
    | `-- first-chunk-stream@1.0.0
    +-- through2@0.6.5
    | `-- readable-stream@1.0.34
    `-- vinyl@0.4.6
      `-- clone@0.2.0

npm WARN gulp-folder@1.0.0 No description
npm WARN gulp-folder@1.0.0 No repository field.

C:\Users\user\Desktop\images\gulp-folder\postcss>gulp update
[15:40:59] Working directory changed to ~\Desktop\images\gulp-folder
(node:5576) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:41:01] Using gulpfile ~\Desktop\images\gulp-folder\gulpfile.js
[15:41:01] Task 'update' is not in your gulpfile
[15:41:01] Please check the documentation for proper gulpfile formatting

C:\Users\user\Desktop\images\gulp-folder\postcss>npm install gulp-postcss --save-dev
npm WARN update-linked node_modules\gulp-tinypng-compress\node_modules\gulp needs updating to 3.9.1 from 3.9.1 but we can't, as it's a symlink
npm WARN gulp-folder@1.0.0 No description
npm WARN gulp-folder@1.0.0 No repository field.

C:\Users\user\Desktop\images\gulp-folder\postcss>npm install gulp --save-dev
npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN update-linked node_modules\gulp-tinypng-compress\node_modules\gulp needs updating to 3.9.1 from 3.9.1 but we can't, as it's a symlink
npm WARN gulp-folder@1.0.0 No description
npm WARN gulp-folder@1.0.0 No repository field.

Comments

[yohira0616]

gulp-tinypng-compress直下にgulpfile.jsはありますか？
そのgulpfile.jsにはupdateというタスクが定義されていますか？

[退会済みユーザー]

すいません。一度がるぷをインストールした場合下記の作業は不要と思っていましたが、毎回やらないといけないのですね。

・下記コマンドでpackage.jsonを生成する
npm init //任意の値を入れてpackage.jsonを生成する

・npm install gulp --save-devコマンドでローカルにnode_modulesフォルダと中身を作成する。

Answer 1

gulpの設定ファイル、及びpackage.jsonは、プロジェクトディレクトリに一つ必要です。

プロジェクトディレクトリに必要であり、各ディレクトリに一つ必ず必要ではないことに注意してください。
プロジェクトディレクトリというのは、「このディレクトリ以下にあるものをプロダクトのソースとみなす」単位のディレクトリです。

例えば、

• sandboxディレクトリ下に、postCSSとjavascriptとhtmlを管理して一つのプロダクトとしたい

場合には、以下の様なディレクトリ構成となります。
sandbox
ーーhtml
ーーーーindex.html
ーーscss
ーーーーstyle.scss
ーーcss
ーーーーstyle.css
ーーjs
ーーーーmain.js
ーーpackage.json
ーーgulpfile.js

この場合、scssを操作したいからといってscssディレクトリにpackage.jsonとgulpfile.jsを配置しないことがポイントです。

そして、gulpを実行するときにはコマンドラインのカレントディレクトリが
sandbox/
となっている状態で実行してください。

（もちろん、ちょっとscssを触りたいからscssだけのプロジェクトでいいや、という状態ならディレクトリ直下にpackage.jsonとgulpfile.jsを配置しても問題ありません）

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
プロジェクトディレクトリというのは、「このディレクトリ以下にあるものをプロダクトのソースとみなす」単位のディレクトリです。

難しいですね。ガルプは、プロダクトとは、グループということですかね？
tynypngならtynypngプロダクト、postcssはpostcssプロダクトと別にするのが正しいのでしょうね。

[yohira0616]

tynypngとpostcssが「完全に別々の用途で使う」なら、プロジェクトを分離するのは正解です。

そうではなく、「pngを小さくしてscss使って新しいWebサービスを作る！」という場合なら、そのWebサービスのソースコード一式が詰まったディレクトリがプロジェクトのホームディレクトリです。

[退会済みユーザー]

プロジェクトとは、よく一般的に使われる、今回のプロジェクトはマナー向上のプロジェクトですなどと同じような意味ということでしょうか？

WEBサイトAならAプロジェクト、
WEBサイトBならBプロジェクト
ということでしょうか？

それとも行う作業が似ているものをグループ化するということでしょうか？
例えば画像圧縮とCSSの圧縮は同じ圧縮系なので同じプロジェクトということでしょうか？

[yohira0616]

どちらかというと
WEBサイトAならAプロジェクト、
WEBサイトBならBプロジェクト
この認識のほうが近いですね。

[退会済みユーザー]

何度もありがとうございます。

何度もすいませんが例えば、POSTCSSのトランスパイスとCSSの圧縮は必ず一緒に行うので、同じフォルダ内のgulpjsに実装すると、そのフォルダをカレントにすれば両方のコマンドをいっぺんに使えるので、そのようにほぼ必ず一緒に行う作業を同じプロジェクトにしたほうがいいのかなと思ったのですが、この考えは違うのですね。

あくまで今回のテンプレを売るECサイトのプロジェクトで行う一連のgulp作業を一つのプロジェクトにするというイメージなのですね。
しかしすると、新しいサイトを作るたびにまた、がそう圧縮などを別にインストールしなおすのでしょうか？

[yohira0616]

新しいサイトを作るたびにgulpfile.jsとpackage.jsonをそのサイト単位で作り、npm installで依存パッケージを入れなおしてください。

[退会済みユーザー]

あくまでgulpはサイト単位なのですね。

新しいサイトを作るごとに、gulpfile.jsとpackage.jsonをコピペで別サイト用に増やすのはだめで、一から作る直すのですね。

画像圧縮のgulpもサイト数作るのですね。

結構大変ですね。

ありがとうございます。

Answer 2

すいません。一度がるぷをインストールした場合下記の作業は不要と思っていましたが、毎回やらないといけないのですね。
下記コマンドをやったところうまくいきました。

・npm init

・npm install gulp --save-dev