フロントエンド

GruntでPostCSSを使う方法

はじめに

この記事では、Gruntを使ってPostCSSを導入し、CSSの圧縮処理を行う手順を詳しく解説します。

Gruntはシンプルなタスクランナーで、繰り返し作業の自動化に便利です。本記事では、PostCSSをGruntタスクとして実行する方法を紹介します。

Gruntのセットアップ方法

Grunt環境の基本的なセットアップについては、以下の記事をご参照ください。

実行環境

  • Nodejs: 20.11.0
  • Grunt: 1.6.1
  • PostCSS: 8.4.33
  • cssnano: 6.0.3

GruntでPostCSSを使う方法

1. 必要なプラグインのインストール

GruntでPostCSSを使用するには、@lodder/grunt-postcssプラグインを導入します。

npm i -D @lodder/grunt-postcss postcss

また、CSSをminify(圧縮化)するためにcssnanoライブラリを追加でインストールします。

npm i -D cssnano

2. @lodder/grunt-postcssについて

GruntのPostCSSプラグインであるgrunt-postcssは2020年9月25日にアーカイブされました。
@lodder/grunt-postcssはgrunt-postcssをフォークし保守されているリポジトリ( C-Lodder/grunt-postcss )です。
本実装ではこちらを使用していきます。

3. Gruntの設定ファイルを作成

以下のコードをGruntfile.jsに記述します。

const grunt = require('grunt');
const cssnano = require('cssnano');

module.exports = function() {
  grunt.initConfig({
    postcss: {
      options: {
        map: false,
        processors: [
          cssnano()
        ]
      },
      dist: {
        src: 'css/style.css',
        dest: 'build/style.min.css'
      }
    }
  });

  grunt.loadNpmTasks('@lodder/grunt-postcss');
};

4. CSSファイルの作成

圧縮対象となるCSSファイルを作成します。

html {  
    display: block;  
    width: 100%;  
    height: auto;  
}  
  
body {  
    display: block;  
    width: 100%;  
    background-color: #fff980;  
}

このファイルをcss/style.cssとして保存してください。

5. package.jsonにスクリプトを追加

package.jsonにGruntを実行するスクリプトを追加します。

  "scripts": {
+    "grunt": "grunt postcss"
  },

最終的なpackage.jsonは以下のようになります。

{
  "name": "grunt-postcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "grunt": "grunt postcss"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@lodder/grunt-postcss": "^3.1.1",
    "cssnano": "^6.0.3",
    "grunt": "^1.6.1",
    "postcss": "^8.4.33"
  }
}

まとめ

この記事では、Gruntを使用してPostCSSでCSSの圧縮を行う方法を解説しました。これにより、効率的にCSSを最適化するワークフローを構築できます。

ぜひ、Gruntを活用してフロントエンドの作業を自動化してみてください！

-フロントエンド
-, ,