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

Question

下記を参考に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
アクセスが拒否されました。

Answer 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をつくる」通りの物にしてください。

Comments

[退会済みユーザー]

下記のようになりました。

C:\Users\user\Node-test\node_modules\gulp-tinypng-compress のディレクトリ

016/01/09 14:14 <DIR> .
016/01/09 14:14 <DIR> ..
015/12/31 20:47 40 .npmignore
015/12/31 20:47 111 .travis.yml
016/01/09 14:22 597 gulpfile.js
015/12/31 20:47 11,384 index.js
015/12/31 20:47 <DIR> node_modules
015/12/31 20:47 2,554 package.json
015/12/31 20:47 4,718 README.md
016/01/09 14:10 <DIR> test
015/12/31 00:23 1,409,982 pcimage.png
015/12/07 15:38 318,727 spimage-center.png
015/12/07 15:38 167,609 spimage-top.png
015/12/31 00:23 1,136,790 tabletimage.png
10 個のファイル 3,052,512 バイト
4 個のディレクトリ 16,083,419,136 バイトの空き領域

C:\Users\hoto-pc\user\node_modules\gulp-tinypng-compress>gulp tinypng
[14:26:34] Using gulpfile ~\Node-test\node_modules\gulp-tinypng-compress\gulpfil
e.js
[14:26:34] Starting 'tinypng'...
[14:26:34] Finished 'tinypng' after 50 ms

C:\Users\user\Node-test\node_modules\gulp-tinypng-compress>type 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 + './*.{png,jpg,jpeg}')
.pipe(tinypng({
key: process.env.TINYPNG_KEY || 'UhRwoHM5QKqSwr-fn8HkLVrHtbf3e_EB',
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';

＿＿＿＿＿＿＿＿＿＿
始め下記でうまく行きました。
C:\Users\hoto-pc\Node-test\node_modules\gulp-tinypng-compress>gulp tinypng
[14:05:00] Using gulpfile ~\Node-test\node_modules\gulp-tinypng-compress\gulpfil
e.js
[14:05:00] Starting 'tinypng'...
[14:05:00] Finished 'tinypng' after 187 ms
[14:05:04] gulp-tinypng-compress [compressing] ✔ image.png (done)

[退会済みユーザー]

・gulpfile.js は、インストールしか書くツールの中にあり、
gulpfile.jsがある所が、カレントディククトリとなる。

そこでコマンドを打てばフルパス出なくてよい。

ということですね。

[退会済みユーザー]

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

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

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

[退会済みユーザー]

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

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

[miyabi-sun]

そもそものライブラリの使い方が誤りです。
「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