sass、gulpメモ(node.js)


sassの導入(Node.js)

Node.jsをインストール

https://nodejs.org/ja/
公式よりダウンロード
コマンドプロンプト、ターミナルでインストールされているか確認
下記のコマンドをたたく

node -v

バージョン情報が報じされていれば完了

package.jsonの作成

作業するフォルダのルートに作成
インストールしたパッケージ情報などが記載されてあるらしい。

作成したいディレクトリにcdとかで移動して、
下記コマンドでpackage.jsonを作成

npm init -y

該当ディレクトリにpackage.jsonができれいればok

Gulpのインストール

該当の作業フォルダ(ローカル環境)以下で、gulpを使えるようにするために、
下記のコマンドを実行してインストールする

npm install -D gulp

タスクの作成

必要なものをローカルにインストール
SassをGulpでコンパイルするためには次の2つのモジュールをインストールする必要がある。
・Gulp本体のgulp
・Sassファイルをコンパイルする為のプラグインgulp-sass
下記のコマンドで両方インストールできる。

npm install -D gulp gulp-sass

gulpを使用するのに必要なgulpfile.jsを作業ファイルにを作成
gulpfile.jsにsassをコンパイルするための下記のコードを記載

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

// style.scssをタスクを作成する
gulp.task('default', function () {
  // style.scssファイルを取得
  gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    .pipe(sass())
    // cssフォルダー以下に保存
    .pipe(gulp.dest('css'));
});

これで設定は完了

コンパイルしてみる

npx gulp

このコマンドでscssファイルがcssにコンパイルされる
保存場所などはgulpfile.jsに記載されている
今回だと「ルート/css」にscssがいて
それをコンパイルして「ルート/css」に出力されている

watch機能

指定したscssファイルを監視して、そのファイルに変更があるたびに、
自動でcssにコンパイルして出力してくれる。
下記コードをgulpfile.jsに記載すればok

// Sassのコンパイルタスクのサンプルファイルです。

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

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

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

下記コマンドで監視を開始

npx gulp

監視を終了する場合はコマンドを開いてCtrlとCキー同時押して終了

備忘録もかねてのざっくりメモでした。

こちらの記事を参考にさせていただきました。
絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順