Edited at 2017-12-11

webpackやGulpのような独自設定ファイルは不要。ParcelでコンパイルするSassとAutoprefixer

昨今のWeb開発ではSass、PostCSS、Babel、TypeScriptといったコンパイルが必要な言語が求められます。それらの言語のコンパイルには、webpackやGulpを用いることが主流です。

webpackはwebpack.config.js、Gulpにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。

module.exports = {
  entry: "main.ts",
  output: {
    filename: "[name].js"
  },
  devtool: "source-map",
  resolve: {
    extensions: ["", ".ts"]
  },
  module: {
    loaders: [
      {test: /\.ts$/, loader: "ts-loader"}
    ]
  }
}

▲ webpack.config.jsの例

最近リリースされた📦 Parcelを使うと、webpackやGulpのような独自の設定ファイルを使うことなく、各種言語のコンパイルが可能。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドラーツールで、記事「webpack時代の終わりとparcel時代のはじまり - Qiita」でも話題になっています。

本エントリーでは、Parcelを使ったSassのコンパイル方法について紹介します。あわせて、Sassの編集と共に自動リロードする方法、ベンダープレフィックスを自動付与する方法についても紹介します。

環境準備

任意のプロジェクトフォルダーを作り、次のコマンドで初期化します。

コマンド

npm init -y

続いて、pacelを次のコマンドでインストールします。

コマンド

npm i -D parcel-bundler

以上で、Parcelの環境設定は終了です。Parcelのための設定ファイルを作成する必要はありません。

※ -yや-Dは、npmコマンドを扱う際の便利なショートカットです。詳しくは「GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方」を参照ください。

Sassのコンパイル

次のようなSassファイルのコンパイルを通して、Parcelの使い方を学びましょう。

Sass

body {
  background-color: #ccc;
}

Sassのコンパイルには、webpackやGulpの場合と同じく、node-sassモジュールのインストールが必要です。

コマンド

npm i -D node-sass

エントリーポイントの準備

Parcelでは、CSSをJavaScript内で読み込んで使用します。webpackの経験があれば、エントリーポイントと似たような働きをすると考えるとよいでしょう。任意の名前のJavaScriptファイル（今回はapp.jsとしました）を作り、importでSassファイルを読み込みます。

app.js

import "./style.scss";

HTMLファイルで、app.jsを読み込みます。

inde.html

<html>
<body>
<script src="app.js"></script>
</body>
</html>

これだけでSassのコンパイル準備は完了します。

コンパイルと自動リロードの開始

次のコマンドで、Sassのコンパイルが開始します。

npx parcel index.html

localhost:1234でローカルサーバーの起動と自動リロードが行われるので、Sassの編集が即座に反映されます。自前で設定をする必要はありません。

ファイルは`dist`フォルダへ出力される

ファイルはdistフォルダへ出力されます。CSSの中身を見ると、Sassがコンパイルされているのがわかります。

Autoprefixerの設定

ベンダープレフィックスの自動付与に便利なAutoprefixer（参考記事「CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定」）を導入してみましょう。

Style.scssにベンダープレフィックスが必要なスタイルを追記します。

style.scss

main {
  display: flex;
  user-select: none;
}

AutoprefixerはPostCSSの一部ですが、Parcelで問題なく使えます。必要なモジュールpostcss-modulesとautoprefixerをインストールします。ちなみにどちらもparcel独自のモジュールではないことに注目してください。

コマンド

npm i -D postcss-modules autoprefixer

PostCSSで必要な設定ファイルpostcssrcを次のように作ります。

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
    }
  }
}

Autoprefixerで対象バージョンを設定するならば、.browserslistrcを次のように作ります。

.browserslistrc

last 2 versions

npx parcel index.htmlを実行すると、出力されたCSSファイルにベンダープレフィックスが付与されていることがわかります（もし出力されない場合は、Sassを再編集すると実行されることがあります）。

ベンダープレフィックスつきで出力されるSassファイル

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

Sassをコンパイルする環境を手軽に作るには便利

以上のように、ParcelはwebpackやGulpのような独自設定ファイルがないため、学習コストが低いです。
ただ単にSassをコンパイルする環境を作りたければ、わざわざwebpackやGulpを設定せずとも事足りる事が多いでしょう。

ただし、Parcelはまだまだ新しいツール。出力後のCSSがフォーマットできなかったり、ソースマップが未対応だったりと、設定項目が少ないゆえのデメリットもいくつかあります。Issueも多いので、個人的にはwebpackやGulpの代わりに実案件で使用するのはまだ先かなと感じています。個人案件では積極的に使っていきつつ、今後のアップデートを追っていきます。