Grunt.jsの後発として、gulp.jsというものが出ていたのをいまさらながら知りました。
どっちもNode.jsが必要
Node.jsをパソコンにインストールしておく必要があります。
- Grunt.js ⇒ タスクランナー
- gulp.js ⇒ ビルドシステムヘルパー
Grunt.js
gulp.js
ビルドシステムヘルパーとタスクランナーの違い
gulpとは何か | CodeGrid さんの説明によると、
タスクランナー(例:Grunt.js)
タスク=プラグインといった感じに、その単一のタスク(プラグイン)を実行させるのが主な役割です。単一のタスクをうまいこと組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチです。
ビルドシステムヘルパー(例:gulp.js)
プラグインはあくまでも入力に対して処理を行うためのものです。gulpのタスクはGruntでいうところのビルドに近いものです。タスクの中でいろいろなプラグインを組み合わせることで、タスク=ビルドを行うといったアプローチを取っています。プラグインを容易に組み合わせられるので、柔軟なタスクを作成できるとともに、タスク同士の依存関係を極力減らすことが可能です。
といった違いがあるようです。
いまから始める場合はgulp.jsがおすすめのようです。
gulp.jsのプラグインでできること
⇩ 下記サイトが詳しいです。
・Web制作の面倒事を自動化!gulpの導入から使い方まで | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 (東京・千代田区)
- gulp-autoprefixer … ベンダープリフィックスの整理
- gulp-coffee … CoffeeScriptのコンパイル
- gulp-compass … compassを使えるようにする
- gulp-imagemin … 画像圧縮
- gulp-plumber … エラーが起きてもwatchさせているタスクを中断させない
- gulp-ruby-sass … Sass/SCSSのコンパイル
- gulp-sourcemaps … sourcemapを使えるようにする
- gulp-uglify … jsファイル圧縮
- gulp-webserver … Webサーバー/ライブリロード
- imagemin-pngquant … png画像圧縮
- gulp-htmlhint … HTML構文チェック
- gulp-less … LESSのコンパイル
- gulp-csscomb … CSSプロパティ並び順整理
- gulp-jshint … JavaScript構文チェッカー
gulp.jsを導入してみる
実際にgulp.jsを導入していきたいと思います。
・5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA
・gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン - SSSSLIDE
・Web制作の面倒事を自動化!gulpの導入から使い方まで | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 (東京・千代田区)
上記のサイトが分かりやすく説明してくれています。
まずは、Node.jsをインストール
https://nodejs.org/en/ にアクセスし、『DOWNLOADS』という項目を選択クリックします。
『LTS』『Current』のどちらかを選択したら、それぞれお使いのOSに合ったinstallerファイルをダウンロードします。
⇩ windows環境へのNode.jsのインストールは下記サイトが詳しいです。
・Node.js / npmをインストールする(for Windows) - Qiita
インストールができたら、コマンドプロンプトで下記コマンドを実行します。
node -v
Node.jsのバージョンが表示されればインストール成功です。
同時にインストールされるnpmもインストールされているか確認します。
npm -v
npmのバージョンが表示されればインストール成功してます。
gulp.jsをインストール
gulpは、
- グローバル
- ローカル
の両方にインストールする必要があるようです。グローバルにインストールすることで、gulpのコマンドをどの場所(フォルダ)でも使えるようにすることができるようです。
ローカルのほうは、Webのプロジェクトフォルダ(ホームページなどの場合、一番外側のフォルダ)にインストールすれば良いようです。
gulpをグローバルにインストールする
コマンドプロンプトで、下記コマンドを実行します。
npm install -g gulp-cli
インストールができているか確認します。
gulp -v
gulpのバージョンが表示されればインストール成功です。
package.jsonファイルの作成
gulpでインストールするプラグインの情報を管理しておくために、package.jsonファイルを作成します。作成する場所は、Webサイトのファイル一式が格納されたフォルダ直下のようです。『cd』コマンドで、該当のフォルダの場所に移動してから、下記コマンドを実行します。
npm init
プロジェクト名や著作権の設定などの入力をどうするか聞かれますが、特に必要なければ、『Enter』キーを連打で問題ないかと思われます。
該当のフォルダをエクスプローラーで開いていると『package.json』 ファイルが生成されています。
package.jsonファイルを開くと、下記のような内容になっています。ここにgulpでインストールしていくプラグインの情報が追加されていきます。
{ "name": "withs", "version": "1.0.0", "description": "<!DOCTYPE html> <html> <head> \t<meta name=\"viewport\" content=\"width=device-width\" /> \t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> \t<title>WordPress › お読みください</title> \t<link rel=\"stylesheet\" href=\"wp-admin/css/install.css?ver=20100228\" type=\"text/css\" /> </head> <body> <h1 id=\"logo\"> \t<a href=\"https://wordpress.org/\"><img alt=\"WordPress\" src=\"wp-admin/images/wordpress-logo.png\" /></a> \t<br /> Version 4.5.3 </h1> <p style=\"text-align: center\">セマンティックな個人情報発信プラットフォーム</p>", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "^3.9.1" } }
Gulp本体をローカル環境にインストール
コマンドプロンプトでpackage.jsonファイルを作成したフォルダに移動します。
cd C:\xampp\htdocs\withs\wp-content\themes\withs
Gulp本体をローカル環境に(プロジェクトフォルダー以下で使えるように)インストールします。
npm install --save-dev gulp
該当のフォルダをエクスプローラーで開いていると『node_modules』 フォルダが生成されています。
gulp本体がローカルにインストールされているか確認します。package.jsonファイルを作成したフォルダに移動している状態で、下記コマンドを実行します。
gulp -v
『Local version 3.9.1』とローカルでのgulpのバージョンが表示されていればOKです。
プラグインを追加していく場合は、コマンドプロンプトでpackage.jsonのあるフォルダにいる状態で、
// プラグインのインストール npm install --save-dev (プラグイン名)
を実行していけば、OKのようです。
実際にプラグインを導入してみる
画像を圧縮する為のプラグインをインストールします。
npm install --save-dev gulp-imagemin
インストールしたプラグインを動作させるためには、プロジェクトファイル直下にgulpfile.jsというファイルを作成し、コードを記述する必要があります。= タスクを作成する。gulpfile.jsファイルでの処理は、JavaScriptを使って記述します。
gulpfile.jsの作成と記述
エクスプローラーで該当フォルダにgulpfile.jsを作成します。
gulpfile.jsに記述
// gulpプラグインの読みこみ var gulp = require('gulp'); // 画像を圧縮するプラグインの読み込み var imagemin = require("gulp-imagemin"); // 「imageMin」という名前のタスクを登録 gulp.task("imgMin", function() { // imgフォルダー以下のjpg,png画像を取得 // 今回は、img/フォルダ名/フォルダ名/フォルダ名...のようにimgフォルダの中にフォルダで階層を分けて画像を保存してる場合のパターンも考慮しています。 gulp.src([ './img/*.{jpg,png}', './img/**/*.{jpg,png}', './img/**/**/*.{jpg,png}', './img/**/**/**/*.{jpg,png}' ],{base: 'img'}) .pipe(imagemin()) // 画像の圧縮処理を実行 .pipe(gulp.dest("./minified_img/") // minified_imgフォルダー以下に保存 ); });
タスクの実行
作成したタスクを実行するには、コマンドラインで『gulp タスク名』を実行します。
gulp imgMin
エクスプローラーで確認すると、『minified_img』フォルダが作成され、『img』フォルダの中身が圧縮されたものが格納されました。
watch機能を使う
画像の圧縮処理について、画像が追加、変更される度にタスクを手動で実行するのは面倒です。タスクランナーには、ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能があり、もちろんGulpでも使えます。
watch機能を使えばファイルの更新後に自動で処理を実行できるようです。
gulpfile.jsを書き換えます。
var gulp = require('gulp'); var gulp = require('gulp'); var imagemin = require("gulp-imagemin"); var IMG_FILE = [ 'img/*.{jpg,png}', 'img/**/*.{jpg,png}', 'img/**/**/*.{jpg,png}', 'img/**/**/**/*.{jpg,png}' ]; // minImgタスクを設定 gulp.task('minImg',function() { gulp .src(IMG_FILE,{base: 'img'}) // 圧縮処理を実行する対象までのパス .pipe(imagemin()) // 画像の圧縮処理を実行 .pipe(gulp.dest("minified_img/")); // minified_imgフォルダー以下に保存 }); // IMG_FILEに格納されたパスのファイルを監視し、『minImg』タスクを実行 gulp.task("watchTask", function() { gulp.watch(IMG_FILE, ['minImg']); });
コマンドプロンプトで『gulp タスク名』で実行したいタスクを実行します。
今回はwatchTaskを実行します。
gulp watchTask
適当な画像ファイルを『img』フォルダに保存したところ、『minified_img』フォルダが作成されました。
watchTaskを終了させるには、コマンドプロンプトで『Ctrl + C』を押します。
『^Cバッチ ジョブを終了しますか (Y/N)?』と聞かれるので『Y』を入力して『Enter』キーを押します。
⇩ パスの指定については下記サイトが詳しいです。
・Gulp:Watchによるファイル監視とタスク実行について - tyoshikawa1106のブログ
⇩ gulpについては、賛否両論みたいです。
・gulp問題ひきずり:ウォッチがまたおバカ過ぎる - 檜山正幸のキマイラ飼育記
⇩ gulpのDocumetationのページです。
gulpについては、時間のある時に勉強していきたいと思います。
今回はこのへんで。