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

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

ただいまの
回答率

90.12%

下記を参考にgulpで画像圧縮をしたいのですが、gulpを実行するためのgulpfile.jsをつくるという所からよくわかりません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,665
退会済みユーザー

退会済みユーザー

下記を参考にgulpで画像圧縮をしたいのですが、gulpを実行するためのgulpfile.jsをつくるという所からよくわかりません。

gulpfile.jsをつくるとは、C:\Users\user\Node-test\node_modules\gulp-tinypng-compress中にあるgulpfile.jsを下記のようにするということでしょうか?

process.env.NODE_ENV = 'normal';

var gulp = require('gulp'),
    tinypng = require('./index'),
    cwd = __dirname,
    sigs = process.env.TINYPNG_SIGS ? true : false;

gulp.task('tinypng', function() {
    gulp.src(cwd + '/test/assets/image.png')
        .pipe(tinypng({
            key: process.env.TINYPNG_KEY || 'PW',
            log: true,
            sigFile: (sigs ? '.sigs' : false)
        }).on('error', function(err) {
            console.error(err.message);
        }))
        .pipe(gulp.dest(cwd + '/test/assets/tmp'));
});

process.env.NODE_ENV = 'test';

また、5. gulpをつかって自動圧縮するのところにも、圧縮のコマンドの記載がないように思えます。gulp-tinypng-compressと打っても下記のように出ます。
'gulp-tinypng-compress' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
gulp-tinypng-compress.exeのようなファイルもないので、パスが通っていないのが原因とも考えずらいです。

http://kuroeveryday.blogspot.jp/2015/10/gulp-tinypng-compress.html
より

OSはwindows7です。

また、フルパスの記載方法は下記で正しいでしょうか?
gulp.src('C:/Users/user/Desktop/images/protfolio/images/slice-images/*.{png,jpg,jpeg}')

・下記の別のサービスも管理者権限でやってもうまくいきませんでした。

C:\Windows\system32>C:\Users\user\Node-test\node_modules\pngquant-bin\vendo
r\pngquant.exe
アクセスが拒否されました。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

gulpfile.jsをつくるとは、C:\Users\user\Node-test\node_modules\gulp-tinypng-compress中にあるgulpfile.jsを下記のようにするということでしょうか?

相当トンチンカンな事をやらかしてますので、まずは落ち着いてください。

Node.jsとは何か、gulpで何をやればいいのかの辺りが難しそうなので、
これに沿って解説していきます。
かなり初心者向けを想定して書きますので、既知の情報が幾つかあるかと思います。

http://kuroeveryday.blogspot.jp/2015/10/gulp-tinypng-compress.html

 そもそもNode.jsやGulpってなんやねん?

もう知ってるよ!…な話だとおもいますが、
Node.jsはPCで動作するJavaScriptで、Gulpはタスクランナーです。

Node.jsには強力なパッケージ管理ソフトのnpmがあり、
Gulpやgulp-tinypng-compressをコマンド一撃でインストールして使えるわけです。

C:\Users\user\Node-testを起点にすすめていきます。

 パッケージのインストール(多分既にやったやつ)

npm install -g gulp
npm install gulp
npm install gulp-tinypng-compress

これでC:\Users\user\Node-test配下にnode_modulesというフォルダが作られ、
その配下にインストールしたgulp-tinypng-compressというフォルダが作られてるかと思います。

 Gulpの使い方

Gulpはgulpfile.jsというファイルがあるフォルダでgulpコマンドを使うと、
gulpfile.jsを読み込み、登録したタスクを実行してくれます。

タスク登録をするにはこんな感じの書き方です。
(4. gulpを実行するためのgulpfile.jsをつくるから拝借してます)

gulp.task('tinypng', function () {
    gulp.src('./images/src/**/*.{png,jpg,jpeg}')
        .pipe(tinyping({
            key: 'xxxxxx' // TinyPNGのAPI Key
        }))
        .pipe(gulp.dest('./images'));
});

これでgulp tinypngというコマンドが登録されました。
このgulpfile.jsがあるフォルダの中でgulp tinypngというコマンドを実行すると、
function(){...}の中身を実行してくれます。

 Node.jsとnpmでインストールしたパッケージの使い方

また(4. gulpを実行するためのgulpfile.jsをつくる)から拝借します

var gulp = require('gulp');
var tinyping = require('gulp-tinypng-compress');

このrequire('gulp-tinypng-compress')に注目です。
これはカレントフォルダからみて、node_modules/gulp-tinypng-compress/というパッケージを探して読み込む命令です。
もしなければ1つ上のディレクトリまで遡ってnode_modules/gulp-tinypng-compress/を探すということを繰り返します。

 ディレクトリ構造

先ほどのGulpとNode.jsの説明はディレクトリ構造を決める為に必要だったのです。
このようにしてください。

C:\Users\user\Node-test
├ node_modules/... ← npm installコマンドで勝手に作られる
├ gulpfile.js ←自分で作る
└ images/src/◯◯.png ←gulpが参照するフォルダを作る

自分で作ったgulpfile.jsを「4. gulpを実行するためのgulpfile.jsをつくる」通りの物にしてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/01/09 17:08

    gulp.src(cwd + '/*.{png,jpg,jpeg}')

    上記のようにカレントを示す.を省略した所実行出来ました。

    gulp.src(cwd + './*.{png,jpg,jpeg}')のように.を付けてはいけないのでしょうか?

    キャンセル

  • 2016/01/09 17:11

    gulp.src(cwd + 'C:/Users/user/Node-test/node_modules/gulp-tinypng-compress/*.{png,jpg,jpeg}')

    上記のようなフルパスでもうまくいきませんでした。
    下記方が特殊なのでしょうか?_

    キャンセル

  • 2016/01/13 18:13

    そもそものライブラリの使い方が誤りです。
    「node_modules」配下のファイルは触ってはいけません。
    「node_modules/gulp-tiny-png-compress」フォルダに入っているgulpfile.jsは微塵もないです。
    これはgulp-tiny-png-compressという画像を圧縮するライブラリをパッケージに固めて配布する為のファイルなので忘れてください。

    私の回答が分からないなら分からないと仰ってください。
    分かるなら一度説明書きの通りにやって下さい。
    無視して勝手な事やってるのに助けて下さいと言われても、、、、こっちが助けて欲しいです。

    gulp.src の書き方は下記サイトを参照してみてください。
    http://am1tanaka.hatenablog.com/entry/2015/08/11/164400

    キャンセル

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • 下記を参考にgulpで画像圧縮をしたいのですが、gulpを実行するためのgulpfile.jsをつくるという所からよくわかりません。