Gulp Sass

Category
Published
Updated

usage

  1. gulpfile.js のあるディレクトリに移動
  2. npx gulp // タスクの実行
  • gulpfile.js の scss の読み込みディレクトリ・ css の出力ディレクトリが、プロジェクトによって変わる点に注意
  • gulpfile.js の内容を変更した場合、ターミナルから一度抜けて再度実行しないと反映されない

初期設定

  • 任意の場所にフォルダ作成
  • cd で移動
  • npm init -y // package.json ファイルが生成される
  • npm install -D gulp Gulp をインストール
  • プラグインのインストール
    • npm install -D gulp sass gulp-sass // Sassコンパイル
  • touch gulpfile.js
  • gulpfile.js に以下のタスクの処理内容を記述

gulpfile.js ファイル編集

// プラグイン読み込み ////////////////////////////////////////////
// gulpプラグイン
const gulp = require('gulp');
// Sassをコンパイル
const sass = require('gulp-sass')(require('sass'));
// 複数のSassファイルを結合
const concat = require('gulp-concat');
// コンパイル後のcssファイル冒頭に任意の文字列を書き込む
const header = require('gulp-header');
const replace = require('gulp-replace');

// プラグイン読み込み ////////////////////////////////////////////
const filePath_scss = '../sass/*.scss';
const filePath_css = '../';
const header_content = `@charset "UTF-8";
/* CSS Document */
/*
Theme Name: conscious
*/
`;

// タスク作成 ////////////////////////////////////////////
gulp.task("default", () => {
  // ★ style.scssファイルを監視
  return gulp.watch(filePath_scss, () => {
    // style.scssの更新があった場合の処理

    // style.scssファイルを取得
    return (
      gulp.src(filePath_scss)
      // 複数のSassファイルを結合
        .pipe(concat('style.css'))
        // Sassのコンパイルを実行
        .pipe(
          sass({
            outputStyle: "expanded",
          })
          // Sassのコンパイルエラーを表示
          // (これがないと自動的に止まってしまう)
          .on("error", sass.logError)
        )
        // コンパイル後のcssファイル冒頭に任意の文字列を書き込む
        .pipe(header(header_content))
        // 自動で付与される@charset指定を削除
        .pipe(replace(/@charset "UTF-8";/g, ''))
        // 指定ディレクトリに保存
        .pipe(gulp.dest(filePath_css))
    );
  });
});

参考