フロントエンドやweb制作会社のエンジニアの方はよく耳にするgulp(ガルプ)。
使ってみたらグーグル翻訳のように便利だったのでこれからgulpを使う人、自分の備忘録ようとして記事にまとめておこうと思います。
この記事を読むメリット
gulpの環境構築方法がわかる
gulpの使いかたがわかる
gulpとは
gulp(ガルプ)とはフロントエンドの開発時に発生するコードをwebブラウザ上でビジュアル化して確認する作業を自動化してくれるツールです。
- pugファイルのコンパイル
- scssファイルのコンパイル
- type scriptのコンパイル
- htmlの圧縮
- cssの圧縮
- jsの圧縮
- 画像の圧縮
など様々なことを自動で行ってくれます。
すごい便利です。
gulpを使うための環境構築方法
gulpを使うためにはnode.jsとnpmが必要となります。
node.jsとはjsをバックグラウンドで動かすための環境です。
npmとはnode.jdを管理したりパッケージをインストールする時に使用するものです。
node.jsとnpmのインルトール方法
node.jsとnpmをインストールする方法は簡単でこちらからファイルをダウンロードし、インストーラを起動させることでかんたにインストールできます。
ダウンロードは推奨版をおすすめします。
適切にインストールできたか確認
CUI、ターミナルから確認できます。
ターミナルを開き、以下のコマンドを実行することでnode.jsのバージョンを確認することができます。
1 |
node -v |
無事バージョンが表示されればインストールは成功です。
次にnpmのバージョンも確認します。
1 |
npm -v |
node.jsもnpmも以下のようにバージョンが表示されますがもし表示されない場合はダウンロードからやり直すか、最新版をインストールして見てください。
1 |
v8.11.4 |
gulpをインストールするためのディレクトリを作る
gulpをインストールするためのディレクトリをあらかじめ作っておきます。
ターミナルを開きディレクトリを制作したいディレクトリまで移動します。
今回はdesktopに作ることにしようと思います、ですのでまずdesktopへ移動しましょう。
移動するためのコマンドは「cd」です。
1 |
cd desktop |
desktopへ移動できたらそこに「testgulp」というディレクトリを作ります。
ディレクトリを制作するコマンドは「mkdir」です
1 |
mkdir testgulp |
1 |
cd testgulp |
package.jsonファイルを作る
以下のコマンドをtestgulpディレクトリ内で実行することでpackage.jsonが生成されます。
1 |
npm init -y |
無事生成されたか確認しましょう
testgulpディレクトリで「ls」を実行することでそのディレクトリの内容を見ることができます。
1 |
ls |
もしくは「cat」でpackage.jsonの中身を見ます。
1 |
cat package.json |
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "gulpfile", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", } |
このようなものが表示されればokです。
gulpをインストールする
ここでようやく本命のgulpがインストールできます。
以下のコマンドを実行しましょう
1 |
npm install -D gulp |
正常にインストールできたか確認しましょう
インストールされるとpackage.jsonに情報が書き込まれるのでpackage.jsonの中身を確認します。
1 |
cat package.json |
中身が以下のように変更されていればokです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "gulpfile", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "^4.0.2", } } |
もしインストールが正常に行かなかった場合はこちらを参考にしてください。
正常にインストールできましたらインストールしたディレクトリに
- gulpfile.js
- node_modules
- package-lock.json
- package.json
が自動生成されます。
使用するのはgulpfile.jsのみですので他はシカトして大丈夫ですが、消去はしないでください。
gulpfile.jsに処理内容を記載することでコンパイルなどを自動化することができます。
これでgulpを使うための環境構築は終了しました。
gulpの使い方
では実際にgulpfile.jsに処理を記載してgulpを使っていきましょう。
よく使うであろう機能をいくつか紹介していきます。
が、gulpの記載方法は2種類あるようで、taskを使って書く方法とallow関数を使って書く方法があります。
taskを使って書く方法は古い方法らしく、挙動がおかしいことがあるようですのでなるべくallow関数を使って書くようにしましょう。
実際、筆者の場合も動かない処理があり苦労しました。
ですがallow関数で記載する方法を解説しているwebサイトが少ないので探り探りといったところです。
scssをコンパイルする
まず、scssをコンパイルするためのプラグインをインストールします。
ターミナルから以下のコマンドを実行してください。
1 |
npm install -D gulp gulp-sass |
正常にインストールされたか気になるかたは「cat package.json」コマンドで確認して見てください。
次にgulpfile.jsに処理を記載していきます。
1 2 3 4 5 6 |
const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル exports.scss = parallel(compilescss);//実行 |
処理の説明はコメントの通りです。
少し難しい部分のみ解説します。
1 |
const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル |
「src」の部分にコンパイルしたいファイルのパスを記載します。
今回はsrcの中のscssの中のscssファイルをコンパイルしたいと思います。「*.scss」はscssという拡張子全てという意味です。
1 |
sass({outpitStyle:'expanded'}) |
「expanded」を「compressed」に変更すると改行なしの圧縮されたファイルが生成されます。
1 |
.pipe(dest('src/css/')); |
コンパイルして生成されたcssファイルを保存する場所のパスを記載します。
実行する方法はターミナルで以下のコマンドを実行します。
1 |
gulp scss |
scssファイルが保存されたら自動でコンパイルする
scssファイルを変更するたんびにターミナルからgulp scssコマンドを叩いていると大変ですよね、ですのでscssファイルが保存されると自動的にコンパイルされるようにしましょう。
gulpfile.jsに追加で処理を記載していきます。
1 2 3 4 5 6 7 |
const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行 exports.default = parallel(watchReFilescss);//実行 |
「const watchReFilesscss」という行を追加し、「parallel(compilescss);」を「parallel(watchReFilescss);」へ変更します。
1 |
const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行 |
「watch」でscssファイルを監視し、保存されると「compilescss」の処理が走るようになっています。
「src/scss/*.scss」の部分に監視する対象のファイルのパスを記載します。
実行します
1 |
gulp |
監視を終了するためにはcommand+cを押すことで終了できます。
コメント