質問: '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 アクセスが拒否されました。
回答: > > gulpfile.jsをつくるとは、C:\Users\user\Node-test\node_modules\gulp-tinypng-compress中にあるgulpfile.jsを下記のようにするということでしょうか? > > > 相当トンチンカンな事をやらかしてますので、まずは落ち着いてください。 Node.jsとは何か、gulpで何をやればいいのかの辺りが難しそうなので、 これに沿って解説していきます。 かなり初心者向けを想定して書きますので、既知の情報が幾つかあるかと思います。 そもそも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をつくる」通りの物にしてください。