LoginSignup
0

More than 5 years have passed since last update.

sass、gulpメモ(node.js)

Last updated at Posted at 2018-06-21

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を使うまでの手順

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0