わたしはつい今までyeomanのジェネレーターを用いて静的サイトコーディングに取り組んでいた。yeomanは、cliによる操作ひとつでHTML5 Boilerplateをはじめ、Sass、Bootstrap、Modernizrなどトレンドに富んだ導入環境を構築してくれる。そして環境自体はタスクランナーのGulpであるから作業の自動化が特徴だ。
しかしwebpackが台頭したことでGulpによる環境構築するシーンは圧倒的に激減した。SPAライブラリに代表されるReactやVue、Angularもこぞってwebpackである。まずwebpackはバンドラーと呼ばれるもので、ファイルをガッチャンコしてくれる。そしてGulpはタスクランナーと呼ばれるもので前述したとおり作業自動化してくれる。したがってそもそも役割が違うわけだけれども、webpackは作業自動化も担っていて、Gulpを使うメリットが減ってしまったのだろう。
そんなこんなでwebpackの環境構築は常々検討していたのだけれど、自作のwebpack環境はトレンドやバージョンを考えると気が引けてしまい、それに至ることはなかった。やはりyeomanのようにcliで操作できる容易さがほしかったわけで、webpack製のものを探してはいたのだけれど巡り合うことがなかった。
そしてこのたびyeomanに取って代わるツールを発見したかもしれない。
このエントリーでは、webpack製の静的Webサイトジェネレーター「Spike」を紹介したい。
Spikeについて
Spikeは、静的Webサイトジェネレーターだ。yeomanを使ったことがあるならば、そのようなものと捉えてもらうとよいだろう。
【Spike】
https://spike.js.org/
特徴
- JavaScriptバンドラーにwebpack
- HTMLパーサーにReshape
- CSSパーサーにPostCSS
- JavaScriptトランスパイルにBabel
Spikeに触ってみる
それでは、Spikeのインストールと使い方について解説しよう。
インストール
Spikeをグローバルにインストールする。Macユーザーは先頭にsudoで試してほしい。
$ npm i spike -gさてインストールが成功したか下記コマンドで確認しよう。
$ spike -v
バージョン値が表示されればOKだ。
プロジェクト初期化
Spike環境をジェネレートしてみよう。任意のフォルダで下記コマンドを実行する。
$ spike new my-project上記コマンド末尾の「my-project」は任意だ。プロジェクト名を適用するとよいだろう。
つづいて、ウィザード形式で進めていく。下記内容が問われる。
? What is the name of your project? ?プロジェクトの名前
? Describe your project ?プロジェクトの説明
? What is your github username? ?githubのユーザー名
? Would you like to use whitespace-sensitive syntax? ?空白を区別する構文を使用する？
? Would you like a production config file? ?本番環境設定ファイルが必要？果たして、プロジェクト雛形をジェネレートできたならば、つづいてプロジェクトに関わるnodeモジュールをインストールする。cdコマンドでプロジェクトディレクトリに移動したのち、npm installかyarnを実行しよう。
$ cd my-project
$ npm install
# or
$ cd my-project
$ yarn開発開始
開発をスタートさせるときは、下記コマンドを実行する。
$ npm run start
# or
$ yarn startするとローカルサーバーが起動して、ブラウザタブにhttp://localhost:1111が開く。
まとめ
webpack製の静的Webサイトジェネレーター「Spike」の紹介だった。
まだyeoman使っていたのか、という感想は受け止めなければならない。かなり希少種であることは自覚しているのだけれど、静的コンテンツをコーディングする程度なら、まずまずの使い勝手を誇るのがyeomanだった。
もしわたし以外にもyeomanを使っていて、webpackに乗り換えたい意欲があるならば、よい機会なのではないだろうか。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
