開発環境の構築は、コードの品質と生産性に大きな影響を与えます。
特に、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.jsongulpfile.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 のトランスパイルなど、開発作業の自動化をさらに進めることができます。
