読者です 読者をやめる 読者になる 読者になる

aircolor memolog

Web制作・テクノロジー、たまに旅行記

npm scriptだけでできるユルいWeb開発環境の構築

この記事はQitta:フロントエンドエンジニア Advent Calendar 2016 14日目の記事です。
今年9月の某案件で軽はずみにWebpackに手を出して大きく消耗してしまい、以来開発環境であんまり消耗したくないと思ったので、npm scriptのみを使った低依存でシンプルな開発用プロジェクトテンプレートwebdev-inital を作成するに至った経緯と、所感を書きました。ついでにPostCSSへの感想も書きました。

Gulp、Gruntなどのツールの偉大さと欠点

GulpやGruntの名誉のために行っておくと、これらのツールは開発環境を激変させた良いツールです。膨大なプラグインとパッケージのおかげで汎用性と拡張性に優れ、各有自分も様々なプロジェクトに使っています。

しかし、最近はGulp、というよりタスクランナーやビルドツールに消耗してきました。社内で「Gulp kgsi」と芸名で呼ばれているぐらいGulpを使っているからでしょうか。Gulpで使うためのパッケージがアップデートされていなかったり、バージョンによって動作しなかったりしたりで、gulp用プラグインによって使えるか使えないか、というケースに遭遇していることが大きいかもです。ちなみに今一番苦手なのはWebpackです。フロントエンド界隈で有名な@t32kさんは去年すでに消耗されていたご様子で… 苦節一年にして、自分もようやくその境地に至りました。

とにかく簡単にしたい

Gulpのタスク分割なども以前はしていましたが、最近はまったくしなくなりました。 弊社の開発サイクルや規模を考えると分割管理することが必ずしも適切ではないことに気づきました、むしろ余計複雑化して管理しにくいケースも発生したり。 というか、GulpもGruntもWebpkackも必要ないぐらいのプロジェクトのほうが実際問題多いのです。例えばSassの生成ためだけにGulpを使うのはナンセンスです。Sass 本体の監視機能を使えば済むことです。しかし複数のタスクを同時実行する必要はあります。 なので、タスクランナーやビルドツールを挟まず、npm run scriptだけで実行管理するプロジェクトテンプレートを作成しました。

構築仕様

コンセプトはとにかくシンプルに作る、ということです。Webサイトをただ作るだけならそれほど多くのものを必要としないのが真実。今回はPostCSSを使ってみたかったのでSassの代わりに導入しています。

github.com

作成してみた感想

Gulpfile.jsがないだけで大変スッキリしました、晴れやかな気持ちです。速度もnpm直で走るので、非常に高速にタスクを実行できます。タスクランナーやビルドツール用のパッケージを使う必要がないという点も気に入っています。高度なことを行う必要がない場合は、しばらくこの方法でビルド環境を構築して行く所存。


ついでにPostCSSを使ってみた感想

Sassの代わりにPostCSSを使ってみたのでその感想もプラスで書きます。今回のプロジェクトにはSassで使用頻度の高かったPostCSS用プラグインを設定しました。そのため、Sassに慣れ親しんだ自分からしてもそれほど違和感なく導入できました。

高速にコンパイルはできる、しかし…

触れ込み通り、プラグイン形式で必要な機能のみを導入できるので、動作が軽快です。書き出しスピードも速く、体感できるレベルです。しかし一方で不便なことも目につきます。 別にSassでいいじゃん、という気持ちも使ってみてなんとなくわかり、時期尚早かも…と思った点がちらほらと。

チーム間での連携しにくさ

Sassは知っていてもPostCSSを知っている人がまだほとんどいないのが現実です。教育コストや学習コストを考えると時期尚早な気も。これはES2015にも共通することですが、社内で、特にデザイナーと共同作業するケースではまだ向いていない気もします。 もちろん、教育も含めて成り立つ組織や会社様もあるので一様には言えません。

エディタの言語パッケージが追いついていない

個人的にはこの点に一番がっかりしました。自分はAtomを使っているのですが、今現在公開さているPostCSS用の言語パッケージをインストールしてみたところ、補完機能がSass言語パッケージと比べると大変弱く、コーディングスピードに影響が出ます(だったら作ればいい?という話もありますが)。おそらくプラグインに合わせたシンタックスやオートコンプリートを設定する必要があるため、実際使いやすいパッケージを作るには大変な気がします。
少なくともこの点が改善されない限り、SassからPostCSSに乗り換えるメリットは今のところなさそうです。

CSS書き出し時に独自の設定を反映したい人向け、それ以外はSassで十分

少なくとも2016年12月現在ではSassで十分かな、と。むしろSassの機能に不満を持っていたり、用意されている機能以上のことをしたい場合に力を発揮するツールという理解をしています。単純にコーダー視点から見ると、次世代CSS(cssnext)に積極的に触れたい、などの理由でもない限り、導入メリットはあまりないかもです。辛口ですが現場からは以上です。

広告を非表示にする