スポンサーリンク

【Mac】GulpとDart-Sassを使用した簡単なSassのコンパイル

Gulp ITライフハック
この記事は約5分で読めます。
スポンサーリンク
当ページはプロモーションが含まれています

開発環境の構築は、コードの品質と生産性に大きな影響を与えます。
特に、CSSのコードを手書きしている場合、プリプロセッサーを使用することで、コードの効率性と再利用性を向上させることができます。
この記事では、タスクランナー Gulp と CSS プリプロセッサー Dart-Sass を使って Sass を CSS にコンパイルする方法をご紹介します。便利なプラグインなどは別の記事でご紹介する予定です。

スポンサーリンク

Gulpとは

Gulpは、開発作業を自動化するための JavaScript のツールで、ファイルの圧縮、Sass のコンパイル、ブラウザのリロードなどのタスクを一括して処理することができます。また、プラグインを追加することで機能を拡張することができます。

スポンサーリンク

Dart-Sass とは

Dart-Sass は、CSS プリプロセッサー Sass の Dart 版です(Dart 言語で書かれています)、Sassのコードを通常のCSSにコンパイルします。変数やネスト、ミックスインなどの機能を使用することで、CSSをより効率的に記述することができます。

今まで使われてきた Lib-Sass(node-sass)は非推奨になりましたので、Dart-Sass が標準になっています。

Gulp と Dart-Sass の導入方法

まず、Gulp と Dart-Sass をインストールするための基本的な環境を準備します。

Node.js と npm のインストール

Mac ではデフォルトでインストールされている「ターミナル.app」 を開き、Node.js と npm(Node Package Manager)をインストールします。以下のコマンドを実行して、Node.jsとnpmのバージョンを確認します。

node -v
npm -v

もしインストールされていない場合は、以下のコマンドでHomebrewをインストールし、Node.jsをインストールします。

Homebrew のインストール方法と、npm のインストールについては以下の記事で詳しく紹介していますので、ご参考になさってインストールして下さい。

npm の初期化

次に、プロジェクトフォルダを作成し、そのフォルダ内で npm の初期化を行います。

mkdir my-project
cd my-project
npm init -y

これで、プロジェクトフォルダに package.jsonファイルが作成されます。

Gulp のインストール

次に、Gulpをインストールします。以下のコマンドでGulp CLI(Command Line Interface)をグローバルにインストールします。

npm install --global gulp-cli

そして、以下のコマンドでGulpをプロジェクトにインストールします。

npm install --save-dev gulp

次に、Dart-Sassをインストールします。

npm install --save-dev gulp-dart-sass

フォルダと Sass の用意

以下のようなフォルダ配置にします。

「dist」「css」「src」「scss」フォルダを「my-project」以下に作成して下さい。

また、「my-project/src/scss」の下に「〇〇.scss」という名前の SCSS ファイルをご用意して下さい。

├─ my-project/
│ ├─ dist/
│ │└─ css/
│ │  └─ コンパイルされた CSS
│ ├─ src/
│ │└─ scss/
│ │  └─ コンパイルする元の SCSS
│ ├─ gulpfile.js
│ └─ package.json

gulpfile.js の作成

Gulpタスクの定義を行うために、プロジェクトのルート(my-project フォルダ)に「gulpfile.js」を作成します。そして、以下のコードを記述します。

Sass を CSS にコンパイルするように記述します

const { src, dest, series, watch } = require('gulp');
const sass = require('gulp-dart-sass');

function compileSass() {
  return src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('dist/css'));
}

exports.default = series(compileSass);

これで、src/scss/ 内の「〇〇.scss」ファイルが CSS にコンパイルされ、dist/css/ に出力されるように設定できました。

Gulp の使用方法

Gulp を実行するには、以下のコマンドを使用します。

npx gulp

このコマンドを実行すると、gulpfile.js に定義されたデフォルトのタスクが実行されます。今回の場合、Sass のコンパイルが行われます。

まとめ

この記事では、Gulp と Dart-Sass を Mac にインストールする方法を解説しました。
これらのツールを活用することで、開発の効率性を大幅に向上させることができます。
また、さらにGulpのプラグインを導入することで、より豊富な機能を利用することが可能になります。例えば、画像の圧縮や JavaScript のトランスパイルなど、開発作業の自動化をさらに進めることができます。

タイトルとURLをコピーしました