WEBデザイン gulp javascript Webデザイン

新米エンジニア小木の議事録　vol.5（Gulpについて）

お久しぶりです。新しいかっこいいメガネでも買いたいなと思っている小木さんです。
そんなめがねのことは置いておいて2018年最初の小木さんの投稿としてgulpについてお話させていただきたいと思います。

gulpとは？

まずgulpについて説明したいのですが、gulpとは「タスク自動化ツール」でして簡単に説明すると面倒な作業を一括して簡単に行ってくれるという優れものなのです。例えば今のフロントエンドであればsassを記述するのにコンパイルしなければいけないし、画像も圧縮しないと表示が遅くなっちゃうし、cssもjsも最終的には圧縮したいし、コード書きながらブラウザシンクしてくれればコーディング楽になるし、ってやること多すぎますよ!!コーディング環境を構築するのも一苦労!!ってときにgulpを使えばらくらく環境構築ができるわけです。

gulp公式ホームページ

タスク一覧

タスク自動化ツールといわれても実際何してくれるの？と感じると思います。以下がタスク例一覧です。（これ以外にもたくさんのプラグインがあるので自分に似合うものを探してみてください！
gulpプラグイン

  • 画像を圧縮
  • sassからcssへコンパイル
  • jsの圧縮
  • ejs(HTMLテンプレートを生成)
  • ローカルサーバーの立ち上げ
  • css-autoprefixerを自動で付与

などが挙げられます。他にもたくさんありますので以下のURLをチェックしてみてください！

https://gulpjs.com/plugins/

ものは試しにやってみよう

さっそくgulpの環境を作っていきましょう。
（※windows環境を想定して行っていきます。）
（gulpはNode.jsが必要なのでNode.jsの公式サイトからインストールをお願いします。）

まずwindowsキー＋Rを押して検索窓に cmd と入力

コマンドプロンプトが立ち上がるので

cd desktop

で移動。

mkdir gulp_test

でフォルダを作成。

cd gulp_test

で作成したファイルに移動。

npm init

これでpackage.jsonを作成します。
いろいろ出てきますがenterを連打しましょう。

以下のようなものが出てきます。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulpをインストールしましょう。

npm install gulp

あとgulpにはgulpfile.jsが必要なので作成しましょう。gulpfile.jsにはタスクの定義や実行、実行するファイルの選択などなどを記述します。また、package.jsonなどと同じ階層に作成してください。この中には色々な設定を記述していきます。

これで大体の準備が整いました!これからタスクをランしてエフィシエントなハッピーライフにチャレンジしてみましょう！

タスクランナー作成

まずは変化がわかりやすいautoprefixerから始めてみましょう。autoprefixerはベンダープレフィックスをgulpを通して自動かしよう！というものです！

npm install --save-dev gulp-autoprefixer

するとpackage.jsonに以下が追加されます。

 
 "devDependencies": {
    "gulp-autoprefixer": "^4.0.0"
  }

そしてgulpfile.jsに以下を書き足します。

var gulp = require('gulp'); //必須
var autoprefixer = require('gulp-autoprefixer');
// autoprefixer
gulp.task('css', function () {
	gulp.src('css/*.css')
		.pipe(autoprefixer())
		.pipe(gulp.dest('dist'));
});

—解説———————————————-

gulp.src('css/*.css')
.pipe(gulp.dest('dist'));

「cssという名のファイルのなかにある拡張子が.cssのすべて」を選択する。

.pipeで繋げてdestでファイルを生成(‘ファイルの名前’)

—解説終了——————————————

先走ってしまいましたがここでgulpの基本構文をさらっと説明したいと思います。

gulp.task('タスク名', function() {
return gulp.src('filepath') // 処理したい対象のファイルを取得・宣言する
	.pipe(処理1)
	.pipe(処理2)   // pipeは複数書くことができて処理内容を連結・連携していくことができます。
	.pipe(gulp.dest('出力フォルダ')); // gulp.dest～でファイルを出力する
});

gulpは上から下へ～流れるようにタスクを書いていく、直感的なツールというのはgulpの一つのメリットです。

そしてCSSのファイルを新規作成します。cssのフォルダを作ってその中にstyle.cssとして作成します。autoprefixerなのでflexなんかを書いてあげるとautoprefixerを自動でつけてくれることが確認できると思います。

.box{
	display:flex;
}

ちなみに今のディレクトリはこんな感じです。

┌─package.json
├─package-lock.json
├─gulpfile.js
├─css
|  └─style.css
└─node_modules
  └─いろいろたくさん入っている

ここで

gulp autoprefixer

と打ちます。

するとdistというファイルが自動生成されてその中にautoprefixerがついているファイルがありませんか？？

.box{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

と生成できていたら成功です！

終わり

少し長くなってしまったので以上で終わりにいたします。次回オススメgulpプラグイン、ブラウザシンク、npmで一括設定など書いていきますので乞うご期待！

gulpを是非取り入れて効率的なコーディングライフをお過ごしください。

関連サービス
ソーシャルメディアマーケティング

関連記事