postass というツールを作った

postass というツールを作成したので紹介します

postass

ポスタスと読みます
post + sass の造語です
Sass をコンパイルした後に 後処理(CSS の変換)を行うので、この名前をつけました

https://www.npmjs.com/package/postass
https://github.com/kanatapple/postass

作成した経緯

社内のエンジニアから「scssファイルを1個更新するだけでビルドが終わるのに8秒かかるので助けてください！」と依頼が来たので、この記事とか参考にいろいろ試したんですが、自分の環境ではなぜか高速化できませんでした
さらに、コンパイルした後に CSS に変換をかけたい(ベンダープレフィックスの付与、URL書き換えなど)という要望もあったので、「それなら、そういうツール作っちゃおう」と思ったのがきっかけです
(ちなみにこのツールを使うことで、ビルド時間が8秒 -> 0.x秒になり、残業時間も減ったそうですｗ)

特徴

• Sass(sass/scss) のコンパイル
• ファイル変更を検知し差分ビルド
  (ファイルの追加・削除もちゃんと検知。node-sass はこの辺がちゃんと動いてない？)
• PostCSS のプラグインが使用できる
  (現在はハードコーディングしているもののみ)
• コマンドライン、JavaScript からの使用が可能

使い方

インストール

$ npm install postass

JavaScript から

var postass = require('postass');
postass.render({
    file: src
    [, options]
}, function(err, result) {
});

postass.render を呼ぶことで、Sass ファイルを CSS にコンパイルします
options に各種設定を渡すことができます
設定内容の詳細はこちら

コマンドラインから

コマンドラインからの使用も可能です

$ postass [options] <input.scss>

options に直接引数を渡すこともできますが、config ファイルで指定することも可能です
引数の内容はこちら

config ファイルは json フォーマットで、コマンドラインに渡す引数を CamelCase にしたものです
(postass.render に渡す options と一緒)

今後の予定

今後の予定ですが、下記のようなことを考えています

• ES201x の形式で書き直す
• PostCSS のプラグインを動的に設定できるように
• テストの追加

---

初めての OSS ということもあり、いろいろ考慮できてないことが多いかもしれません
その点はご了承ください

初めて公開するというハードルは超えられたので、これからもいろいろなツールを出していきたいと思います