前になりますが、仕事でgulpを試してみたことがあったのでその手順です。やりたかったことは、自動的に画像を圧縮する、リサイズをするプログラムです。gulp-imageminとgulp-image-resizeを使います。結局その時作ったシステムでは使えなかったのですがその後デザイナさんが使うようになったみたいなのでやってみてよかったなーと思っています。使いこなせば本当に便利なもの!Gulpとは?タスクランナーだと思っていたけど、正しくはビルドシステムヘルパーらしい。gulpはNode.jsをベースとしたビルドシステムヘルパー。参考:https://app.codegrid.net/entry/gulp-1簡単な処理、画像の圧縮やsassコンパイル、簡易ローカルサーバーの立ち上げ、FTPアップロード処理なんかが自動化できるよう。(webアプリケーションの一部としてPHPと組み合わせて使うのには向いてなかった...)node.jsをインストールではさっそく入れて使ってみましょう。公式サイトよりインストール。-vを実行し、バージョン表示されることを確認する。–yes今後インストールしたモジュールとかは、package.jsonに記載されていくことになります。gulp-image-resize画像を360×360にリサイズして!との要望だったので、gulp-imagemin-resizeもインストール。gulp-imagemin-resizeを利用するには、ImageMagickもしくはGraphicsmagickが必要なので、今回はImageMagickをインストール。ImageMagickgulp-image-resizeもインストール。必要なプラグインをインストールしたら、実行したいタスクを追加していきます。gulpfile.js、ここに追加したタスクが実行されることになります。node.jsを書きます。インストールしたプラグインはrequireで呼び出す必要があります。require(‘gulp’);`こんな感じでかけばプラグインをrequireして使えるようになる。タスクは、基本的にはこんな感じでかいていきます。//なにやらクォリティや圧縮スピードなんかのオプション。タスクを実行する上記の例だと、実行時はこんな感じのコマンドをたたけば実行されます。実行できる!いくつかのタスクを順番にやりたいときは、runseaquenceというのを使ってください。これも全然勘所がわからずに「とりあえず使ってみたい」ってだけで使ってみたものなので、書き方とかはあんまりきれいじゃないかもしれませんが、一応よくわからない人でも使えるものになるようになっているんじゃないかと。画像を入れるフォルダとかのファイルパスはちゃんと設定してあげてくださいね。最新の記事まみたす1992年生まれ。知識ゼロ文系女子からSEになっているところ。カメラ、猫、お酒、旅行がすきです。2019年5月18日この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。MeCatstagram。