Sass ファイルの自動化で開発効率をアップ: watch コマンドとツールで作業を楽々

2024-05-19

Sass でファイルを監視し、自動的に圧縮する方法

このチュートリアルでは、sass --watch コマンドと --style compressed オプションを使用して、Sass ファイルの変更を監視し、自動的に圧縮された CSS ファイルを生成する方法を説明します。

必要なもの

Sass がインストールされていること
ターミナル

手順

ターミナルを開き、Sass ファイルがあるディレクトリに移動します。
以下のコマンドを実行します。

sass --watch --style compressed main.scss main.min.css

このコマンドは、以下のことを行います。

main.scss ファイルの変更を監視します。
変更があった場合、main.scss ファイルを main.min.css ファイルにコンパイルします。
main.min.css ファイルは圧縮されます。

Sass ファイルを変更して保存します。

ファイルが変更されると、ターミナルにメッセージが表示され、新しい main.min.css ファイルが生成されます。

オプション

--watch オプションは省略可能です。このオプションを省略すると、Sass はファイルを 1 回だけコンパイルして終了します。
--style オプションを使用して、出力 CSS のスタイルを指定できます。有効な値は、nested、expanded、compact、compressed です。

例

sass main.scss main.css

以下のコマンドは、styles.scss ファイル内のすべての Sass ファイルを compact スタイルで styles.min.css ファイルにコンパイルします。

sass --style compact --include-paths styles styles.min.css

補足

この方法は、Sass ファイルを監視して圧縮する簡単な方法です。
より複雑なタスクには、Gulp や Webpack などのツールを使用する必要があります。

sass --watch --style compressed main.scss main.min.css

使い方

Sass でファイルを監視し、自動的に圧縮するその他の方法

Gulp を使用する

Gulp は、タスクランナーと呼ばれる JavaScript ライブラリです。タスクランナーは、自動化タスクを実行するために使用されます。

Gulp を使用して Sass ファイルを監視して圧縮するには、以下の手順が必要です。

Gulp と必要なプラグインをインストールします。

npm install gulp gulp-sass gulp-clean-css

gulpfile.js ファイルを作成し、以下のコードを追加します。

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCss = require('gulp-clean-css');

gulp.task('default', function() {
  gulp.watch('*.scss', function() {
    gulp.src('*.scss')
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest('css'));
  });
});

gulp default コマンドを実行します。

このコマンドは、*.scss ファイルの変更を監視し、変更があった場合、ファイルを css ディレクトリに圧縮された CSS ファイルとしてコンパイルします。

Webpack は、モジュールバンドラーと呼ばれる JavaScript ライブラリです。モジュールバンドラーは、JavaScript アプリケーションを構築するために使用されます。

Webpack と必要なローダーをインストールします。

npm install webpack webpack-loader sass-loader

const path = require('path');
const webpack = require('webpack');
const sassLoader = require('sass-loader');

module.exports = {
  entry: './main.scss',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.css'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  watch: true
};