はじめに

ビルドプロセスとは？

ビルドプロセスとは、通常自動化された一連のタスクであり、アプリケーションの新しいリリースをデプロイするたびに実行するものです。cssnanoは、開発中のCSSで実行されるツールとして、このビルドプロセスに組み込まれ、圧縮された本番環境向けアセットを作成します。これらはその後、本番サーバーまたはCDNにアップロードされます。

ビルドプロセスを構成する方法はいくつかあります。コマンドラインの使用をお勧めしますが、特に複雑なシステムの場合は、gulpなどの抽象化も検討できます。

Node.jsとnpmのインストール

cssnanoは、npmを使用してコマンドラインからインストールされます。そのため、ターミナルやWindowsコマンドプロンプトなどのアプリケーションを使用する必要があります。Node.jsがまだインストールされていない場合は、インストールする必要があります。

実行にはNode.jsバージョン10.13.0以上が必要です。Node.jsのバージョンの管理には、nvmのインストールをお勧めします。

または、Node.jsのウェブサイトにアクセスして、手順に従ってマシンにインストールすることもできます。

cssnanoはPostCSSプラグインであるため、cssnanoを実行するにはPostCSSもインストールする必要があります。Node.jsとnpmをインストールしたら、このコマンドを実行してcssnanoとPostCSSをプロジェクトにインストールできます。

npm install cssnano postcss --save-dev

ほとんどの一般的な設定では、サーバー/CDNにアップロードする際にCSSが既に最適化されるように、デプロイステップでCSSを圧縮することをお勧めします。ほとんどの場合、Webサーバーにcssnanoをインストールする必要はありません。

PostCSS CLIの使用

cssnanoをインストールしたら、CSSファイルの圧縮に使用するPostCSSランナーが必要です。PostCSSコマンドラインモジュールをお勧めしますが、次のセクションにリストされている代替手段を使用することもできます。

PostCSS CLIはこのコマンドでインストールできます。

npm install --save-dev postcss-cli

これを実行したら、プロジェクトのルートに`postcss.config.js`ファイルを作成してcssnanoを設定する必要があります。これには、cssnanoと、プロジェクトに必要なその他のプラグインを含める必要があります。例として

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

プリセットの詳細については、プリセットガイドをご覧ください。

これでCSSファイルを縮小できます！プロジェクトに`input.css`という名前のCSSファイルを作成し、そこにいくつかのスタイルを入れて試してみてください。次に、実行します。

npx postcss input.css > output.css

その後、同じスタイルだが圧縮された`output.css`が表示されます！

GitHubリポジトリに基本的な例もあります。

はじめに

ビルドプロセスとは？

Node.jsとnpmのインストール

PostCSS CLIの使用

CLIを使用しない代替手段

Grunt

Gulp

Webpack

その他