Sass(Scss)をgulpでコンパイルする方法【Windows想定】

過去のサービス開発でScss(CSSをより使いやすくしたもの)を使ったことがあるのだけど、Sassの導入でわりと手こずったので、同じく苦しんでいる人に向けて導入方法を書いていこうと思う。

ちなみに、今回は「Windows」を想定しているため、コマンド操作ではコマンドプロンプトを使っていく(macだとターミナル)。

目次

  • Sassのコンパイルに必要なものをインストール
  • ファイルへの記述(コピペでOK)

SASSのコンパイルに必要なものをインストール

その前に、そもそもSassをインストールしていない人は下記の記事を参考に用意しておくと良い↓

Win・Mac】Sassを導入&初めてScssを使ってみる

では、いく。

まず、インストールすべきものは3つある。

  1. Node.js
  2. gulp.js
  3. gulp-sass

1と2については以下の記事が参考になりすぎる↓

WindowsにNode.js とGulp.jsをインストールしてみた

無事に終わったら、次は3。

Sassをコンパイルするにあたって、npmでgulp-sassをインストールするわけだが、まず自身が開発するデータが入ったフォルダに移動する。

フォルダ名は何でもいいが、例えば wordpress01 というフォルダに開発データが入っているとしたら、

画像の部分をクリックすると一発でディレクトリ(フォルダの場所)がわかるから、コピーして、下記にペーストする。

cd ここにコピーしたものを貼り付ける

すると、wordpress01ディレクトリにたどりつくはず。

そして、以下のコマンドを入力して、 gulp-sass をインストール。

npm install -D gulp gulp-sass

package.json をエディタで開いて、

"devDependencies": {   
   "gulp": "^4.0.0",
     "gulp-sass": "^4.0.2"
 }, 

こんな感じになってればOK。

ちなみに数字の部分はバージョンアップとかで変わるから違ってても大丈夫。

ここまででインストールすべきものはした。

ファイルへの記述(コピペでOK)

一旦、開発データ(例としてwordpress01フォルダ)の整理をする。

wordpress01フォルダ内には

  • 空のcssフォルダ
  • main.scssが入ったsassフォルダ
  • index.html

の3つが格納されている状態だ。

gulpfile.js にタスクを記述

gulpfile.jsに以下のファイルをコピペするとOK。

あたりまえだが、ファイル名やフォルダ名によって適宜変更する必要がある。

'use strict'; // 厳格にエラーチェックを行うモードへ切替

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');

// main.scssの監視タスクを作成する
gulp.task('default', function () {
  //  main.scssファイルを監視
  return gulp.watch('sass/main.scss', function () {
    // main.scssの更新があった場合の処理

    // main.scssファイルを取得
    return gulp.src('sass/main.scss')
      // Sassのコンパイルを実行
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassのコンパイルエラーを表示
      // (これがないと自動的に止まってしまう)
      .on('error', sass.logError))
      // cssフォルダー以下に保存
      .pipe(gulp.dest('css'));
  });
});

うまくいけば、

glup

でmain.scssが自動コンパイルされて、cssフォルダにmain.cssがつくられる。

つまり、main.scss内で書かれたファイルが勝手にmain.cssに反映されるから、scssでどんどん書いていけるということである。

これで終わり。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA