タスクランナーの使用を辞めてAtomで全部済ませるようにした話

GruntとGulpを辞めた話と聞くと、普通はWebPackとかの話になるのだと思いますが、Atomで済ませるようになったという話です。

Atomって本当に良いエディタになりましたね。数年前ならVimとかSublimeTextとか言っていたと思いますが、最近のテキストエディタはAtom一択と言っても過言ではありません。

SublimeTextを使っていた時はAtomは重すぎると思っていましたが、機能が向上したりして、それも感じられなくなりました(久しぶりにSublimeTextを使うと軽く感じますが)。

今日はMacBook Proを新調して、環境設定をしていたのですが、Gulpをインストールするかどうかで迷いました。Gulpを継続するか、Atom内で完結できるようにするか。フロントエンドの開発で言えば便利だし、面倒じゃないと思ったからです。

私がタスクランナーでやっていたこと

・SCSS(Compass)コンパイル
・CSSファイルの圧縮
・Javascriptファイルの圧縮
だけでした。
実験的に色々やってみましたが、やはり画像を圧縮するなら作成時にPhotoshopでやりますし、ファイルのリネームもリネーム用のアプリを持っているのでそっちでやります。大々的にやるならプログラム作ってやったりもしますし、探せばAtomにもリネームのパッケージなんかはありそうです(調べてません)。

これだけ?じゃあAtomでいいよね。Gulpいらないよね。ということで、AtomでCompassが使えるようにしたいと思います。

AtomでSASS(Compass)環境を整える

Macの場合はRubyが初めから入っているので、インストールは必要ありませんが、Windowsの場合はインストールが必要です。

sudo gem install sass

ターミナルでSASSをインストール。

sudo gem install compass

続いて、Compassをインストール。
ターミナルを使うのはここまで。

Atomでターミナルが使えるようにします。
私はterm3というパッケージを使っていますが、terminal-plusとかatom-terminalがよく紹介されています。私はterm3が便利だと感じたのでterm3を使っています。

config.rbをプロジェクトのディレクトリに作ります。

http_path = “/”
css_dir = “”
sass_dir = “”
output_style = :compressed
line_comments = false

私は一般的なサイトであれば、こんな感じで設定をします。

term3はタブとして開くと、そのプロジェクトのディレクトリに移動した状態で始まるので

compass watch

してあげれば、すぐに使うことができます。

実際、このぐらいしか使っていないので、タスクランナーを使う必要なんてないな、と感じてしまったので、しばらくはこれで行こうと思います。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.