【環境構築 Mac OS編】Gulpで開発環境を自動化!?Sassの導入と便利な使い方

ご購入者の特典のご紹介

本記事をご購入した方への特典として「Gulp導入パック」をプレゼントいたします。

「Gulp導入パック」を使うと、これからご紹介する内容のすべてを数分で導入する事が出来ます。

すぐに環境を作りたい方はぜひご活用ください。

Gulpってなに？

Gulp(ガルプ)というのはフロントエンド開発で多くの手間を自動でやってくれるタスクランナーと呼ばれるツールです。

テキストエディタ等でHTML・CSS・Javascriptを書いている時に、コード補正やファイルの変換や圧縮など、さまざまな機能を追加して自分好みの開発環境を作ることが出来ます。

Gulpで出来ること

Gulpはフロントエンド開発を効率的に行うために、さまざまな事を自動化してくれます。

【Gulpで出来ること】

・ SassからCSSへ変換

・ TypeScriptからJavaScriptへ変換

・ コードの補正

・ コードの圧縮

・ CSSにベンダープレフィックスを自動付加

・ CSSのメディアクエリをまとめる

・ 画像の一括圧縮

Gulpはこれだけの機能を裏で処理をして、開発を効率化をしてくれます。

また、これらの処理はカスタマイズ次第では、ほぼリアルタイムで処理することが可能です。

コードを書いてその数秒後には「変換」「圧縮」がされているので、すぐに結果を確認する事が出来ます。

今回はこれらの内容をご紹介しようと思います。

【記事内容】

・ Gulpの導入

・ SassからCSSへコンパイル

・ ファイル変更の監視

・ 監視のエラー処理

・ ベンダープレフィックスの自動付加

・ メディアクエリをまとめる

・ BabelでJavaScriptのコードを変換

・ CSSとjavaScriptのコード圧縮

・ Sassのソースマップ

・ JavaScriptのソースマップ

・ ソースマップの削除

・ 画像の一括圧縮

・ 複数のファイル変更の監視で処理を分ける

・ 複数の処理を同時に行う(並列/直列処理)

Sassってなに？

Sassとは、簡単に言うと「CSSの強化版」という表現が良さそうです。

CSSにプログラミング的要素を追加したものが、「Sass」と呼ばれる言語です。

SassでCSSを書くと急なデザイン変更等で大量な変更があっても、柔軟に対応がしやすくなるメリットがあります。

Sassで出来ること

SassはCSSの強化版と表現しましたが、SassではCSSでは出来なかったものを補ってくれる機能がたくさんあります。

【Sassで出来ること】

・ セレクターの入れ子(ネスト)で記述

・ 親セレクターの参照

・ 変数

・ 配列

・ ループ

・ 条件分岐

・ 関数

・ CSSの部品化

・ Sassファイル間の連携

変数やループが出来る点がプログラミング要素の特徴ですね。

よくSassで使われる機能は「入れ子」「親セレクターの参照」「変数」が多そうです。

慣れてくると「CSSの部品化」や「他のSassファイルとの連携」を活用して、管理しやすい設計にすることが可能になります。

圧倒的にCSSの記述が楽になるので、Sassの導入はおすすめです。

【補足】

Sassで書かれたコードは、ブラウザでは処理出来ません。

ブラウザで処理ができるのは「CSS」のみなので、Sassを「CSS」に変換をする必要があります。

なので、今回はGulpで「SassからCSSへ変換」をする方法をご紹介したいと思います。

Gulpの導入

まずはGulpを導入していきますが、Gulpは「Node.js」がMacに入っていないと動かす事が出来ません。

もし、まだお使いのMacに「Node.js」が入っていない場合は、下記のリンクから「Node.js」の導入方法をご紹介しています。

よろしければご参照ください。

・ Mac編 Node.jsの導入方法とバージョン管理

https://brmk.io/AUmR

これから使うコマンド

これからMacのターミナルを使って作業を進めていきます。

その際によく使うコマンドを先にご紹介します。

【cdコマンド】

ターミナル内でディレクトリを移動する際に使うコマンドです。

ディレクトリとは他の言い方をすると「フォルダ」です。

Finderでフォルダをダブルクリックするとそのフォルダの中に移動が出来ますよね。

ターミナルの場合は「cd」でフォルダ中に移動します。

ターミナルの場合は、移動先のフォルダやファイルまでのパスを指定して移動をします。

例:

cd /Users/sheep/Documents/MyProject/

【npm・npxコマンド】

Node.jsをインストールすると、同時に「npm」「npx」のコマンドが使えるようになります。

Node.js関連のコマンドを使用する際にこのコマンドを使用します。

今回の場合、Gulpの導入や実行の際に頻繁に使います。

例:

npm init -y

npm install -D

npx gulp

Gulpの導入方法

ここからはNode.jsが入っている前提の解説になります。

それでは、さっそくGulpを導入していきます。

Gulpの導入の流れはこのように進めていきます。

【Gulpの導入方法】

1. Node.jsの動作確認

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

3. ターミナルで「gulp」フォルダへ移動

4. 「package.json」の生成

5. Gulpのインストール

Macのターミナルを使用してGulpを導入していきます。

Macのターミナルを起動して、コマンドが入力できる状態にしてください。

1. Node.jsの動作確認

まずは、Node.jsがちゃんと動くか確認をします。

ターミナルに下記のコマンドを入力して、Node.jsのバージョンを表示しましょう。

【ターミナルに入力するコマンド】

node -v

このコマンドを実行して、上の画像のように「v16.14.0」といった「v」から始まる数字が表示されていれば「Node.js」は正常に動作しています。

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

次にプロジェクト用のフォルダを作成します。

今回は「MyProject」というフォルダ名で作成して解説を進めていきます。

MacのFinderから「書類」を選択して、その中に新しく「MyProject」というフォルダを作成しましょう。

そして作成した「MyProject」の中に移動して、その中にさらに「gulp」というフォルダも作成しましょう。

「MyProject」と「gulp」の構造はこのようになります。

【フォルダの構造】

- 書類/

　- MyProject/

　　- gulp/

3. ターミナルで「gulp」フォルダへ移動

Macのターミナルから、先ほど作成した「gulp」というフォルダまで移動します。

フォルダの移動は「cd」というコマンドを使用して、移動先のファイルパスを指定して移動しましょう。

【ターミナルに入力するコマンド】

cd /Users/sheep/Documents/MyProject/gulp

コマンドを入力して「書類」の「MyProject」の「gulp」フォルダまでのファイルパスを直接指定して移動をしました。

移動先のファイルパスが分からない時は、こんな方法でも可能です。

ターミナルに「cd 」と入力した状態にします。(スペースは忘れずに)

Finderの「gulp」のフォルダとターミナルが開いている状態にします。

Finderの「gulp」を選択して、そのままターミナルの方へドラッグ&ドロップをしてみましょう。

すると、ターミナルに「gulp」フォルダまでのファイルパスが入力されるのでEnterで移動しましょう。

ターミナルで「gulp」フォルダ内へ移動ができると、上の画像のように「~」から「gulp」へ文字が変わります。

この状態が「gulpフォルダ」の中に入っている状態です。

ここからは、ターミナルで「gulp」の中にいる状態で進めていきます。

4. 「package.json」の生成

次はgulpフォルダの中に「package.json」というファイルを作成します。

「package.json」はこれからプラグインをインストールする際に、それらのプラグインを管理してもらうために必要なファイルです。

作成方法はとても簡単で、ターミナルに下記のコマンドを入力して実行をすると自動的に作成してくれます。

【ターミナルに入力するコマンド】

npm init -y

Node.jsのコマンドである「npmコマンド」を使います。

【コマンドの意味】

init: 初期化する事

-y: デフォルトの設定で行う際に、(Yes)という意味で使います。

Finderでgulpフォルダの中を見ると「package.json」というファイルが新しく作成されます。

これでGulpをインストールする事前準備が出来ました。

ちなみに

この「package.json」の中身はこんな感じになっています。

この中身が自動で書き変わっていくので、このあとは基本的には触らないので見るだけにしときましょう。

【package.json】

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

5. Gulpのインストール

事前準備が出来たのでGulpをインストールしていきましょう。

「gulp」フォルダの中に、Gulpの本体をインストールしていきます。

【ターミナルに入力するコマンド】

npm install -D gulp

npmコマンドでインストールする時のそれぞれのコマンドの意味はこのようになります。

【コマンドの意味】

install: パッケージをインストールする時に使用

-D: インストール先をローカルに設定(今回はgulpフォルダの中)

ターミナルでコマンドを実行すると、10秒ほどターミナルがゴチャゴチャ処理を行うのでしばらく待ちます。

ターミナルの処理が終了すると、Gulpのインストールが完了します。

Gulpのインストール完了後は「node_modules」と「package-lock.json」の2つが新しく作成されます。

「node_modules」の中にはGulpに必要なプログラムがまとまっていて、「package-lock.json」はnode_modulesの管理をしているファイルです。

この2つも特に理由がない限り触らないので、中を見るだけにしておきましょう。

これでGulpの導入は全て完了しました。

次はSassの導入に進んでいきましょう。

Sassの導入

Gulpのインストールが完了したので、次はSassをMacに導入していきましょう。

こちらもターミナルで「gulp」フォルダを開いている状態から操作を行います。

Sassの導入方法

ターミナルでSassのパッケージをインストールしていきます。

今回ダウンロードするパッケージは2つです。

【ダウンロードするパッケージ】

・ sass

・ gulp-sass

この2つのパッケージを同時にインストールします。

【ターミナルに入力するコマンド】

npm install -D sass gulp-sass

するとターミナルでSassのインストールが開始されるのでしばらく待ちます。

インストールが終了するとSassが「gulp」フォルダの「node_modules」の中に追加されます。

Sassのインストールが完了しているか「package.json」の中を確認してみましょう。

【package.jsonの中身】

{  "name": "gulp_test",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "gulp": "^4.0.2",    "gulp-sass": "^5.1.0",    "sass": "^1.49.9"  }}

このように、package.jsonの中に「sass」と「gulp-sass」の文字とそのバージョンが記録されています。

もし、package.jsonの中にこの2つが見当たらない場合は、インストールに失敗しているのでコマンドを確認してもう一度行ってみてください。

「gulpfile.js」の作成

Sassのパッケージをインストールが出来たら、「SassからCSSへ変換」するための実行用のプログラムを作成します。

GulpでSassを変換する時に必要な実行ファイル「gulpfile.js」を作成して中にプログラムを書いていきます。

【gulpfile.js】

1. 「gulpfile.js」ファイルの作成

2. プログラムの作成

1. 「gulpfile.js」の作成

上の画像のように「gulp」フォルダの中に新しく「gulpfile.js」というファイルを作成するのですが、これはご自身で新しく作成する必要があります。

作成の仕方は、テキストエディタから作成をしてください。

もうお気づきかもしれませんが、「gulpfile.js」はJavaScriptのファイルです。

JavaScriptでGulpの実行用のプログラムを作成していきます。

2. プログラムの作成

「gulpfile.js」を作成したら、その中にJavaScriptのプログラムを書いていきます。

中に記述するコードはこのように記述します。

【gulpfile.jsのコード】

/** *  * Gulpプラグインの読み込み *  * Gulpの本体 *  */const gulp = require("gulp");/** *  * Sassに関するプラグイン *  * 【Gulpのプラグイン】 * Sassの本体 *  */const sass = require("gulp-sass")(require("sass")); // Sassをコンパイルするプラグイン/** *  * 取得先と出力先のファイルパス * styles: SCSSとCSS *  */const paths = {  styles: {    src: "../sass/*.{sass,scss}",    dest: "../css/",  }}/** *  * SassをCSSに書き換える *  * 引数: done * これがないと処理が終わらない *  * 処理終了 * done() *  */const sassCompile = (done) => {  // SassフォルダをGulpで参照  gulp.src(paths.styles.src)    // Sassのコンパイルを実行    .pipe(sass())    // cssフォルダに出力    .pipe(gulp.dest(paths.styles.dest))  // 終了  done();};/** *  * コマンドで実行(どちらでも可) * npx gulp * npx gulp default *  * sassCompile: SassをCSSに書き換える *  */exports.default = sassCompile;

簡単にこのコードの内容を確認するとこんな感じです。

【gulpfile.jsの処理内容】

1. requireで「gulp」「sass」「gulp-sass」を取得

2. 変数pathsの中に、Sassの読み込み先の「src」とCSSの出力先の「dest」を設定

3. コマンドを入力すると「exports.default」が最初に反応してsassCompile関数が実行される

4. sassCompile関数でSassからCSSへ変換処理を行う

長いプログラムなのでよくわからない部分があるかもしれません。

Gulpで自動化したい事を「gulpfile.js」の中にコードを書いてカスタマイズする事が出来ます。

ひとまず「SassからCSSへ変換する」機能が完成したので、「gulpfile.js」を保存しておきましょう。

Sassファイルの作成

Sassをコンパイル(変換)する機能が完成したので、Sassファイルを作成して検証をしてみましょう。

上の画像のように、MyProjectの中に小文字で「sass」というフォルダを作成します。

そして作成した「sass」フォルダの中に、新しく「style.scss」というファイルを作成します。

「style.scss」中にSassのコードを記述するのですが、例えばこんな感じで記述すると変換後の結果がわかりやすくなると思います。

【style.scssの中身】

header {    width: 100%;    height: 400px;    h1 {        color: red;        text-align: center;    }    p {        font-size: 18px;    }    nav {        width: 100%;        margin: 2em 0;        ul {            margin: 0;            padding: 0;            list-style: none;        }    }}main {    width: 100%;    min-height: 100vh;    display: block;    .container {        width: 100%;        max-width: 800px;        margin: auto;        &.active {            background: black;        }    }}

Sassのコードを記述したら保存をしましょう。

コマンドでSassのコンパイル

それでは「SassからCSSへ変換」の検証をしていきます。

「style.scss」からGulpを通して「style.css」に変換してみたいと思います。

ターミナルで「gulp」フォルダに移動している状態にしてください。

そして下記を入力してSassのコンパイル処理を実行しましょう。

【ターミナルに入力するコマンド】

npx gulp

すると、ターミナルでコンパイルの処理が動くので終わるまでしばらく待ちます。

コンパイル完了後に「style.css」が書き出されているはずです。

Finderの「MyProject」の中を見てみると、新しく「css」というフォルダが作成されています。

その「css」フォルダの中に「style.css」が書き出されているので、「style.scss」と比較をしてみましょう。

以上でGulpとSassの導入方法の解説は終了です。

この次は、さらに使いやすいようにカスタマイズをする方法を解説いたします。

便利な使い方

Gulpにはまだまだたくさんの機能とプラグインがあります。

それらを組み合わせることで、自分専用の便利な開発環境を構築することが可能です。

【便利な機能】

1. ファイル変更の監視

2. 監視のエラー処理

3. CSSの圧縮

4. ベンダープレフィックスを自動付加

5. メディアクエリをまとめる

6. CSSプロパティの並び替え

7. Sassのソースマップ

8. JavaScriptの圧縮

9. BabelでJavaScriptのコードを変換

10. JavaScriptのソースマップ

11. ソースマップの削除

12. 画像の一括圧縮

13. 複数のファイル変更の監視で処理を分ける

14. 複数の処理を同時に行う(並列/直列処理)

今回は上記の内容をすべてご紹介いたします。

これらの機能を一つずつ解説いたしますので、よかった挑戦してみてください。

また、Brainの購入特典として、上記の内容をすべて一括で導入できる「Gulp導入パック」を用意しています。

ぜひ最後まで読んでいただけると嬉しいです。