UnCSSで未使用のCSS削除を自動化する方法 #CSS

未使用のCSSを自動的に削除して結果を縮小するために、Node.js、Grunt、UnCSS、およびCSSminと呼ばれる別のプラグインを設定する方法を説明します。

Install Node.js

Node.js Webサイトから最新のディストリビューションをダウンロードし、インストール手順に従います。

Install Grunt

Node.jsを開き、コマンドプロンプトに次のように入力します。

npm install -g grunt-cli

Gruntは自動的にダウンロードされます。

プロジェクトフォルダを開きます

Node.jsコマンドプロンプトを使用して、UnCSSでスキャンするファイルが含まれているフォルダーに移動します。これを行うには、ファイルパスを入力します。例えば：

cd C:TestProject

Install UnCSS and CSSMin

Node.jsコマンドプロンプトに次のように入力します。

npm install grunt-uncss grunt-contrib-cssmin --save-dev

UnCSSとCSSMinパッケージは、指定されたプロジェクトフォルダーにインストールされます。

gruntfile.jsファイルを作成します

プロジェクトのルートディレクトリにgruntfile.jsというJavaScriptファイルを作成します。 gruntfile.jsは、UnCSSなどのプラグインの構成ファイルとして機能します。 Node.jsコマンドプロンプトに次のコードを入力します。


module.exports = function (grunt) {
    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'cleancss/tidy.css' }
                ]
            }
        },
        cssmin: {
            dist: {
                files: [
                    { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
                ]
            }
        }
    });

// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');

// Default tasks
grunt.registerTask('default', ['uncss', 'cssmin']);


};

上記の手順では、UnCSSにindex.htmlファイルをスキャンして未使用のCSSを探し、cleancssという名前のフォルダー内にトリミングされたCSSファイルを作成するように指示しています。次に、CSSminプラグインは、デフォルトでtidy.cssと呼ばれる新しいCSSファイルを縮小します。最後の数行は、両方のプラグインをロードして登録するため、特に重要です。

Grunt実行

最後に、ソースファイルフォルダに戻って、次のようにGruntを実行する必要があります。

C:TestProject>grunt

これにより、UnCSSとCSSminが動作するようになります。すべてを正しく実行すると、指定されたフォルダーでクリーンで縮小されたCSSファイルが待機します。一部の開発者は、この方法でCSSファイルのサイズが95％以上削減されたと主張しています。これは、最小限の労力で多くの節約になります。セットアッププロセスは1回だけ実行する必要があります。将来的には、Gruntを実行するだけで、プロジェクトから未使用のCSSを自動的に取り除くことができます。