質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • gulp

    331questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,109
退会済みユーザー

退会済みユーザー

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.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yohira0616

    2016/06/13 18:27

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/06/13 18:54

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

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

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

    キャンセル

回答 2

+2

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を配置しても問題ありません)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/13 19:18

    ありがとうございます。

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

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

    キャンセル

  • 2016/06/13 19:22

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

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

    キャンセル

  • 2016/06/13 19:32

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

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

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

    キャンセル

  • 2016/06/13 19:35

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

    キャンセル

  • 2016/06/14 11:40

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

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

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

    キャンセル

  • 2016/06/14 11:55

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

    キャンセル

  • 2016/06/14 12:36

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

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

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

    結構大変ですね。

    ありがとうございます。

    キャンセル

check解決した方法

-3

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

・npm init 

・npm install gulp --save-dev

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • gulp

    331questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

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