• Home
  • Web制作
  • 【初心者必見！】Gulpで爆速CSSコーディング！SCSSのコンパイルを徹底解説

【初心者必見！】Gulpで爆速CSSコーディング！SCSSのコンパイルを徹底解説

schedule
Tags: SCSS

はじめに：Gulpで快適なCSSコーディングを実現しよう！

Webサイトのデザインには欠かせないCSS。しかし、規模が大きくなるにつれて、コードが複雑化し、管理が大変になることも少なくありません。

そこでおすすめなのが、SCSSとGulpの組み合わせです。SCSSは、より効率的にCSSを記述できる拡張言語で、GulpはWeb制作の自動化ツールです。

本記事では、Gulpを使ってSCSSをCSSにコンパイルする方法を、初心者の方にもわかりやすく解説していきます。

Gulpとは？そのメリットをわかりやすく解説

Gulpとは、JavaScriptで記述されたタスクランナーと呼ばれるツールで、Web制作の様々な作業を自動化することができます。

Gulpを導入する主なメリットは以下の通りです。

  • コーディング作業の効率化: SCSSのコンパイル、ファイルの圧縮など、面倒な作業を自動化できます。
  • ヒューマンエラーの防止: 自動化により、手作業によるミスを減らすことができます。
  • 開発時間の短縮: 作業効率が上がることで、開発時間の短縮に繋がります。

SCSSをコンパイルする方法【Gulp入門編】

それでは早速、Gulpを使ってSCSSをCSSにコンパイルする手順を見ていきましょう。

ステップ1：必要な環境を準備する

まずは、Gulpを使用するために必要な環境を準備します。

  1. Node.jsをインストールする: GulpはNode.js上で動作するため、事前にNode.jsをインストールしておく必要があります。公式サイトからダウンロードしてインストールしましょう。
  2. プロジェクトフォルダを作成する: 作業用のフォルダを作成し、コマンドラインツールでそのフォルダに移動します。
  3. package.jsonを作成する: プロジェクトの情報を管理するpackage.jsonファイルを作成します。コマンドラインツールでnpm init -yを実行すると、自動で作成されます。

ステップ2：Gulpとプラグインをインストールする

次に、Gulp本体と、SCSSのコンパイルに必要なプラグインをインストールします。

コマンドラインツールで以下のコマンドを実行してください。

npm install --save-dev gulp gulp-sass

上記のコマンドでは、gulpとgulp-sassという2つのパッケージをインストールしています。gulp-sassは、Gulp上でSCSSをコンパイルするために必要なプラグインです。

ステップ3：gulpfile.jsを作成し、タスクを定義する

Gulpで実行するタスクを定義するために、プロジェクトフォルダのルートにgulpfile.jsというファイルを作成します。

gulpfile.jsに以下のコードを記述してください。

// Gulpとプラグインを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// タスクを定義する
gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss') // コンパイル対象のSCSSファイルを指定
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) // SCSSをCSSにコンパイル
    .pipe(gulp.dest('./dist/css')); // コンパイル後のCSSファイルの出力先を指定
});

// デフォルトタスクを定義する
gulp.task('default', gulp.series('sass'));

上記のコードでは、sassという名前のタスクを定義しています。このタスクは、src/scssフォルダ内の全てのSCSSファイルをコンパイルし、dist/cssフォルダに出力します。

ステップ4：タスクを実行する

コマンドラインツールでgulpコマンドを実行すると、gulpfile.jsで定義されたデフォルトタスクが実行されます。

gulp

コマンド実行後、dist/cssフォルダにコンパイルされたCSSファイルが出力されていれば成功です。

まとめ｜GulpでSCSSコンパイルをもっと快適に！

今回は、Gulpを使ってSCSSをCSSにコンパイルする方法をご紹介しました。Gulpを導入することで、面倒な作業を自動化し、より効率的にWeb制作を進めることができます。

ぜひ本記事を参考に、Gulpを活用してみてください。

関連記事