タスクランナーのgulpを使ってWeb制作の効率をあげてみる

久しぶりです。
日々伸び悩んでいて困り果ててます。

こっそりと色々な人のお話を聞きつつ色々なものを試しているのですが、イマイチ・・・ものにできないんですよね。

ですが懲りずに「gulp」を試してみました。

gulp

gulpとは

簡単にいうと画像の圧縮、ファイルの圧縮、Sassのコンパイルなんかを自動でやってくれるツールです。

もっと詳しく知りたいと思うので引用させてもらいます。

JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイルガイド生成などなど……。
そうした作業をまとめて処理してくれます。
参照:コーディングに関わる人なら抑えておきたい必須のフロント技術&ツール8選 | 株式会社LIG

便利ですよね。

人気のものはgulpの他にもGRUNTがあるのですが、最近はgulpの勢力が強くなってきている気がするので、私もこっちを使ってみます。

gulp公式サイト
GRUNT公式サイト

まずは環境の構築。

1.node.jsのインストール

gulpを動かすにはnode.jsが必要なのでインストールします。
公式サイトからインストーラをダウンロードします。

インストーラを起動して、手順通りに進むだけです。

2. node -vで バージョンチェック

コマンドラインで

node -v

でEnter

gulp1

問題なさそう

3. プロジェクトのフォルダ作成

適当にフォルダを作ります。
例:C:\xampp\htdocs\project

これはコマンドラインからも作れますが普通に作成しても可。

4.package.jsonの作成

みんな大好き黒い画面。
コマンドラインでいっちゃいましょう。

gulp2

3で作成したフォルダに移動します。ちょっと意味のないことしてますがご愛嬌です。
cd(change directory)コマンドで移動してください。
あれ?見つからないって場合はdirコマンドでファイル一覧を見ることができます。

移動が終わったらgulpを動かすのに必須の「package.json」を作ります。

npm(ノード・パッケージ・マネージャー)から。

移動後の階層にいることを確認したら
npm init
と打って実行。

色々と聞かれますがエンター連打で良さそうです。

gulp3

最後にIs this ok?と聞かれますのでエンターを押しましょう。

そうすると先ほど作成したフォルダ(例ではprojectフォルダ)にpackage.jsonが出来てます。

5.gulpのインストール

次はgulpのインストール、先ほどのフォルダにインストールします。

npm install gulp –save-dev

と打ってEnter

6.プラグインをインストールする

今回は、画像の圧縮のプラグインを試します。

npm install --save-dev gulp-imagemin

–save-devとするとインストールしたプラグインのバージョン情報がpackage.jsonに記載されます。

{ 
"name": "test", 
"version": "1.0.0", 
"description": "",
"main": "index.js",
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" },
"author": "",
"license": "ISC",
"devDependencies": { 
"gulp": "^3.8.11",
"gulp-cssmin": "^0.1.7",
"gulp-imagemin": "^2.2.1",
"gulp-rename": "^1.2.2" }
}

できたみたいです。

gulp4

画像では違うプラグインもインストールしていますが気にしないでください。

7.gulpfile.jsを作成する

ここまで来たらあと少し。 先ほど作ったpackage.jsonともう一つ必要なファイル「gulpfile.js」を作成します。 ※これは自動で作成はできないので手書きもしくは、先人が作ったものを利用します。 javascriptです。 一行目でgulpを読み込みます。

var gulp = require('gulp');

次にプラグインを読み込みます。

var cssmin = require("gulp-cssmin");

次にタスクを書きます。pngファイルを圧縮します。

gulp.task("imgMin", function() { 
 gulp.src("images/*.png")
 .pipe(imagemin())
 .pipe(gulp.dest("images_min/"));
});

8.タスクを実行する。

gulp imgMin

gulp5

これで上記gulpfile.jsで作成したタスクが実行されて、images_minフォルダに圧縮された画像が書き出されています。

9.タスクを自動化する。

ではやってみましょう。
先ほどのgulpfile.jsを編集します。

gulp.task("watchtask",function(){
	gulp.watch("images/**", function() {
		gulp.src("images/*.png")
		.pipe(imagemin())
		.pipe(gulp.dest("images_min/"));
	});
});

そしてコマンドラインで

gulp watchtask

これでimagesフォルダ内に画像が入るとタスクが動きimages_minフォルダに圧縮された画像が保存されます。

gulp6

できました。

色々なプラグインがあるそうなので、自分好みにすれば開発時間の短縮ができそうですね。

今後使っていこうかと思います。

参考サイト:
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう | Webクリエイターボックス
5分で導入できる! タスクランナーGulpを使ってWeb制作を爆速にしよう | ICS LAB

関連記事

関連する記事は見当たりません…