npm-scriptでタスクを作って今までのプロジェクトのgulpやlaravel mixに差し込みたい
私はフロント案件開発のタスクランナーとして昔gulp、現在はlaravel mix（webpack）を使っています。
今までのプロジェクトに新しくタスクを作る必要があるけど、コード書き直すのが面倒だなーと思ってた時にたどり着いたのが、cliです。npm-scriptから実行できるので、gulpやwebpackに合わせて改めてコードを書かなくてOK。
しかも一度作るとタスクランナーに依存なく使いまわせます。もちろんメンテナンスは必要です。
imageminをインストールしてさっさと実行したい人は前置きすっ飛ばしてください。
npm-scriptとは？
私の敬愛するICSメディアさんにとてもわかりやすい説明が掲載されていたのでそのまま引用しました！
ウェブ制作の現場では作業の自動化が流行っています。「Gulp」「Grunt」などのタスクランナーや「webpack」などのビルドシステムなどのツールにより人力の作業を減らすことができ、生産効率や品質の向上につながります。
どちらもNode.jsのモジュールとして動作するツールですが、実はこれらのタスクランナーを使わずとも、Node.jsインストール時に付属するnpm(Node Package Manager)を使用すれば、タスク処理が実現できます。
npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。Gulpやwebpackは有用ですが、npm-scriptsと併用することでさらに便利になります。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ
cliとは？
cliとはCLI(Command Line Interface) の略でコマンドラインから色々操作する方法です。 GitHubにさまざまなCLIが公開されています。
- ESLint
- npm
- imagemin（今回はこれ使います）
imageminをインストール
npm で node moduleをインストールします。
$ npm install imagemin imagemin-keep-folder imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo --save-dev画像圧縮のjsファイルを作り処理を書く
ディレクトリー構造はこちら。
/ (プロジェクトディレクトリー)
├ node_modules/
├ package.json
├ src/
| └ assets/images/（圧縮前の画像が格納されているフォルダ）
├ html/
| └ assets/images/（圧縮後の画像格納）
└ imagemin.js（追加）imagemin.jsファイルを作り以下のコードを書きます。
今回はタスクを作るにあたり、こちらのブログ記事を参考にしました。
同じようにコードを書いてやるとimagemin-pngquantの実行でコケます。
imagemin-pngquantの公式ページで見てみると、配列で書いてねとあるので0 ~ 1までの値を指定します。
Type: Array<min: number, max: number>
Values: Array<0...1, 0...1>
Example: [0.3, 0.5]/*
compress images
*/
const imagemin = require('imagemin-keep-folder');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');
imagemin(['src/assets/images/**/*.{jpg,png,gif,svg}'], {
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminPngquant({ quality: [0.6, 0.8] }),
imageminGifsicle(),
imageminSvgo()
],
replaceOutputDir: output => {
return output.replace(/images\//, '../../html/assets/images/')
}
}).then(() => {
console.log('Images optimized');
});package.json側で画像圧縮（imagemin.js）を実行するシェルスクリプトを登録する
あとはpackage.jsonに以下のコードを足します。
"scripts": {
"imagemin": "node imagemin.js"
}実行コマンド
あとはコマンドから以下のコードを叩くだけ。
npm run imagemin他のタスクと一緒に処理
私は他のタスクと一緒に処理しています。
シェルスクリプトは&で接続することで並列処理、&&では直列処理ができます。
私は普段laravel-mixを使ってますが、画像なんてあまり追加しないのでタスクを立ち上げる際に処理を実行するようにしています。
"w": "npm run image & npm run development -- --watch"続けてシェルスクリプトを追加するのであればこんな感じになると思います。
{
"scripts": {
"watch-poll": "npm run watch -- --watch-poll",
"image": "node imagemin.js",
"w": "npm run image & npm run development -- --watch"
}
}まとめ
タスクランナーに依存せず使いまわせるのはとっても便利です。
走り書きですが、皆さんのコーディングライフの一助になれば幸いです。
最後までお読みいただきありがとうございました。
