design makes life richly.

Published: 4年 ago

『Grunt』でプリプロセッサの自動化


  
GRUNTは、grunt.jsに設定したタスクを実行して、様々な作業を一度にやってくれます。
ファイルをminifyしたり、concatしたり。
何かと便利で、これ使えばプリプロセッサのコンパイルの際に、開発用と本番用のcssを同時に吐き出せるのでは!!と思い色々調べてみました。
導入からプリプロセッサの自動化まで書いて行こうと思います。 
 
 

GRUNTを動かしてみる

 
GRUNTを使うにはnode.js及びnpmが必要なのでまずはそちらをインストール☟ 

node.jsのインストール
インストールしたら、npmコマンドが使えるようになっているかと思いますので、下記のコマンドを打ってGRUNTをインストールしましょう(npmコマンドでエラー出た場合はsudo付けて下さい)☟

$ npm install -g grunt

<!-- インストール出来なかったら -->
$ sudo npm install -g grunt

  

次にpackage.jsonを作る。
なんかこれが無いとエラー吐き出して動いてくれなかった。作るには以下のコマンドで対話的にドキュメントを作成する☟

$ grunt init

実はここら辺は良く分かっていないので割愛しますが、僕の場合はREADME.mdが無いよ!注意文出てきたので

$ grunt init:comonjs

これを打って必要そうなファイルやフォルダをいっぺんに作りました。
うん、これで問題ないよね。注意文でなかったし。それでは、必要なファイルが揃ったのでGRUNTを実行して行きましょう!
実行にあたり、grunt.jsの中身に実行するタスクを書き込んでいきます。
タスクの書き方は下記の様な感じ。
jsのminifyを例に書いて行きます。

module.exports = function(grunt){
  grunt.initConfig({
    // ここから実行するタスクを書いていく
    min: {
      dist: {
        src : ['js/test.js'],
        dest : 'js/test.min.js'
      }
    },
    // watchする場合はここに監視するファイルとタスクを設定
    watch : {
      scripts : {
        files : ['js/*.js'],
        tasks : 'min'
      }
    }
  });
  <!-- デフォルトタスクの設定 -->
  grunt.registerTask('default', 'min');
};

 
   
デフォルトタスクはターミナル上で

$ grunt

と打ち込み事で、registerTask内に書いたタスクを実行してくれます。上記の場合はminってタスクですね。また、ファイルを監視して、タスクを自動化する場合は

$ grunt watch

これも同じように、監視するファイルと実行するタスクを書いて行けばOKです!! 
 
 

プリプロセッサも自動化

では、プリプロセッサもGRUNTで実行出来るようにして行きたいのですが、このままだとcssやcssプリプロセッサを扱う事が出来ません。
そこでモジュールをインストールしていきます。以下のモジュールをインストールして下さい。

<!-- grunt-contrib -->
$ npm install grunt-contrib

<!-- grunt-sass -->
$ npm install grunt-sass

<!-- grunt-compass -->
$ npm install grunt-compass

 
 
 
contribにはcoffeeスクリプトやjadeなどを扱えるようにするパッケージなどいろいろ入っているので、入れておいてそんは無いかと思います。
今回grunt-contribの中で扱うのはmincssのみなので、それだけで良いという方は、

$ npm install grunt-mincss

これで、grunt-mincssだけインストールして下さい。今回やってみたかったのが、プリプロセッサで開発用のcssと本番用のcssを同時に吐き出すというもの。なので、プリプロセッサでコンパイルしたcssを吐き出す→吐き出したcssをminifyする。この処理を自動化してみる事にした。ちなみに僕はSassを利用しているので、下記はSassの場合☟

module.exports = function(grunt){
    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    "css/style.css": "scss/style.scss"
                }
            }
        },
        mincss: {
            compress: {
                files: {
                    "css/style.min.css": ["css/style.css"]
                }
            }
        },
        watch : {
            scripts : {
                files : [
                    'css/style.css',
                    'scss/style.scss'
                ],
                tasks : 'sass mincss'
            }
        }
    });
    // ここに扱うモジュールを書く
    grunt.loadNpmTasks('grunt-contrib');
    grunt.loadNpmTasks('grunt-sass');

    grunt.registerTask('default', 'sass mincss');
};

このようにgrunt.jsにタスクを書くと、GRANT実行時にコンパイルして出てきたcssとminifyされたcssが同時に出てくる。
つまりこんな感じ!

project
  ┗ css
    ┗ style.css
    ┗ style.min.css
  ┗ scss
    ┗ style.scss
grunt.js
pakcage.json
README.md

んでこのままだと、Compass使ってるときはエラーはいちゃって上手く行かないので、Compass使ってるよって方はコチラを参考に!!

module.exports = function(grunt){
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                }
            }
        },
        mincss: {
            compress: {
                files: {
                    "css/style.min.css": ["css/style.css"]
                }
            }
        },
        watch : {
            scripts : {
                files : [
                    'css/style.css',
                    'scss/style.scss'
                ],
                tasks : 'compass mincss'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib');
    grunt.loadNpmTasks('grunt-compass');
    grunt.registerTask('default', 'compass mincss');
};

この設定に戸惑ったんだけど、何が上手く行かなかったかというとconfig.rbの読み込み。
いくつかCompassのモジュール試してみて今回扱ったモジュールを使って、optionの部分を空の{}で囲むと、config.rbをうまいこと見つけて処理ってくれた。
フォルダの構造はこんな感じ☟

project
  ┗ css
    ┗ style.css
    ┗ style.min.css
  ┗ scss
    ┗ style.scss
config.rb
grunt.js
pakcage.json
README.md

 
 
 
とりあえず、これでCompass使って開発用と本番用のcssの書き出しは上手くいくようになりました!
今後は職場のWin環境のLiveReloadが調子悪いので、grunt-reloadも組み込んで行きたいなーって思っていたり。
GRUNTいろいろカユい所に届くツールなので、皆さんも是非是非試してみて下さい! 
 
 

参考にさせて頂いた記事

gruntはじめてました。 | どっかのエンジニアの裏チラ。
Gruntメモ(grunt.js編) | shilog
npm / package.json | publicdraft 
 
 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK