Grunt.jsの始め方 -cssmin,watch編-

前回、sassのコンパイルを行なってみたので、今回はcssminやwatchなどを使ってみたいと思います。

Grunt.jsの概要だったり、インストールが知りたい方は過去記事参考にしてください。

Grunt.jsの始め方 -Grunt.jsの概要編-
Grunt.jsの始め方 -インストール編-
Grunt.jsの始め方 -タスク編集とsass編-

Grunt.jsを使ってcssをminifyしてみる

前回のファイルを利用して、cssをminify化してみようと思います。

module.exports = function (grunt) {//最初に書く
  grunt.loadNpmTasks('grunt-contrib');//プラグインの読み込み
  grunt.initConfig({//タスク登録

    sass: {//プラグイン名
        compile:{//タスク名
            files:{
                'style/css/main.css':'style/sass/main.scss'
            },
            //sassOption
            // options:{
            //     style:'compressed'
            // }
        },
      },

      cssmin:{
        min:{
            files:{
                'style/css/main.min.css':'style/css/main.css'
            }
        }
      }

  });
grunt.registerTask('default', [ 'sass','cssmin']);
};

基本的な書き方は同じです。
プラグインの名称を書き、ファイルを指定ます。
minファイルが出来上がるように書きました。
最後の実行するタスクにcssminを加えるのを忘れないでください。

コンパイルをしてみましょう。

grunt

これでminifyしたcssのファイルが出来上がったと思います。

Grunt.jsを使って自動でコンパイルしてみる

手動でコンパイルをしていると非常にめんどくさいので、sassなどではwatchを使っている方もいらっしゃると思います。
同様にgruntでもファイルの更新状況を確認し、変更があった場合に自動で更新を行う、watchというプラグインがあります。

gruntfileを書いていこうと思います。

module.exports = function (grunt) {//最初に書く
  grunt.loadNpmTasks('grunt-contrib');//プラグインの読み込み
  grunt.initConfig({//タスク登録
    watch:{
        sassmin:{
            files: 'style/sass/main.scss',
             tasks: [ 'sass','cssmin']
        }
    },
    sass: {//プラグイン名
        compile:{//タスク名
            files:{
                'style/css/main.css':'style/sass/main.scss'
            },
            //sassOption
            // options:{
            //     style:'compressed'
            // }
        },
      },
      cssmin:{
        min:{
            files:{
                'style/css/main.min.css':'style/css/main.css'
            }
        }
      }

  });
  grunt.registerTask('default', [ 'watch']);//タスクの実行
};

watchもほとんど同じ書き方なのですが、変更を監視するファイルを「files」で指定します。
そのファイルに変更が合った際に行うタスクを登録します。
ここでは、[sass]と

[cssmin]を指定しました。
最後に実行するタスクなのですが、これはwatchだけを指定します。
watchが実行され、watchの中で、[sass]と[cssmin]が動くためです。

では、実行します。

grunt

これを実行するとファイルを監視し始めます。
何か、scssファイルに変更してみましょう。

自動でコンパイルが走ります。

まとめ

このようにgruntは最初はとっつきにくいですが、初めてみるとそれほど複雑ではありません。
ぜひ使ってみて下さい。

ではでは

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search