タスクランナーのgulpを使ってWeb制作の効率をあげてみる
久しぶりです。
日々伸び悩んでいて困り果ててます。
こっそりと色々な人のお話を聞きつつ色々なものを試しているのですが、イマイチ・・・ものにできないんですよね。
ですが懲りずに「gulp」を試してみました。
gulpとは
簡単にいうと画像の圧縮、ファイルの圧縮、Sassのコンパイルなんかを自動でやってくれるツールです。
もっと詳しく知りたいと思うので引用させてもらいます。
JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイルガイド生成などなど……。
そうした作業をまとめて処理してくれます。
参照:コーディングに関わる人なら抑えておきたい必須のフロント技術&ツール8選 | 株式会社LIG
便利ですよね。
人気のものはgulpの他にもGRUNTがあるのですが、最近はgulpの勢力が強くなってきている気がするので、私もこっちを使ってみます。
まずは環境の構築。
1.node.jsのインストール
gulpを動かすにはnode.jsが必要なのでインストールします。
公式サイトからインストーラをダウンロードします。
インストーラを起動して、手順通りに進むだけです。
2. node -vで バージョンチェック
コマンドラインで
node -v
でEnter
問題なさそう
3. プロジェクトのフォルダ作成
適当にフォルダを作ります。
例:C:\xampp\htdocs\project
これはコマンドラインからも作れますが普通に作成しても可。
4.package.jsonの作成
みんな大好き黒い画面。
コマンドラインでいっちゃいましょう。
3で作成したフォルダに移動します。ちょっと意味のないことしてますがご愛嬌です。
cd(change directory)コマンドで移動してください。
あれ?見つからないって場合はdirコマンドでファイル一覧を見ることができます。
移動が終わったらgulpを動かすのに必須の「package.json」を作ります。
npm(ノード・パッケージ・マネージャー)から。
移動後の階層にいることを確認したら
npm init
と打って実行。
色々と聞かれますがエンター連打で良さそうです。
最後に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" } }
できたみたいです。
画像では違うプラグインもインストールしていますが気にしないでください。
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
これで上記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フォルダに圧縮された画像が保存されます。
できました。
色々なプラグインがあるそうなので、自分好みにすれば開発時間の短縮ができそうですね。
今後使っていこうかと思います。
参考サイト:
・タスク自動化ツール「gulp」 を使って制作時間を短縮しよう | Webクリエイターボックス
・5分で導入できる! タスクランナーGulpを使ってWeb制作を爆速にしよう | ICS LAB