最近ゼロからポートフォリオを作ろうと思っていざデザインができてから実装しようとなったとき、快適な環境を作ってデプロイするところまでの方法を私はちゃんと知らないということに気付きました。
そしてググっても初心者向けになかなかこういう手順でやればいいよ！というものが出てこないのと、要求される開発リテラシーが高いので今回はエンジニアから伝授してもらったちょっとモダンな静的サイト開発の方法を環境構築から自動デプロイまで私の備忘録がてらまとめたいと思います。
かなり長くなりそうなのでまずは環境構築編。
【スポンサーリンク】
前提
今回の記事は以下のような人を対象としています。
- HTMLとCSSをある程度は書ける
- Gitの基礎的なことがわかる
- CLI(ターミナル)での操作ができる
ちなみにOSはMacです。
PugとStylusって？
PugはHTMLのテンプレートエンジン、StylusはCSSプリプロセッサです。簡単に言うと生でHTMLやCSSを書くのがダルいからもっとラクに書けるようにするものとでも言いましょうか。
Pugならタグで囲む必要がなくなったりと記述の省略ができたりファイル分割可能、変数が使用可能ですし、Stylusならコロンやセミコロンを省略可能だったりネストできたりと生のHTMLとCSSよりも便利な機能があったりします。
つまるところ、今回はその便利なPugとStylusをまずは開発で使えるようにしましょうねというところをやっていきたいと思います。
実装に快適な環境をつくる
それでは開発環境を作っていきましょう。目指すのは以下の状態です。
- PugとStylusが使える
- 実装最中の差分を検知して常に最新の状態をプレビューできる
1. yarnをインストールする
今回パッケージマネージャーにyarnを使うのでこちらをインストールします。ターミナルから以下のコマンドを叩きます(さすがにHomebrewはある前提になっております)。
$ brew update
$ brew install yarnこれでインストール完了です。
2. 開発用のディレクトリと諸々のファイルをつくる
開発に必要なディレクトリとファイルを以下のように作成します。今回はポートフォリオサイトを作る前提でportfolioという名前のディレクトリをルートにしてます。
distはビルドされて出てきたものが置かれる場所で、srcがソースを置く場所です。
3. package.jsonを作成する
いろいろなパッケージを使う準備をします。ターミナルでportfolioディレクトリまで飛んだら以下のコマンドを実行しましょう。
$ yarn initすると以下のように対話形式で進みます。適宜必要な情報を追加したりしてください。
question name (portfolio):
question version (1.0.0):
question description: portfolio
question entry point (index.js):
question repository url: https://github.com/xxx/yyy
question author: Taro Yamada
question license (MIT):
question private: true完了するとportfolioディレクトリにpackage.jsonが生成されているはずです。このpackage.jsonにいろいろとコマンドを書いたりして便利にしていきます。
4. 必要なパッケージをインストール
続いて開発に必要なパッケージをインストールしていきます。以下のコマンドを実行します。
$ yarn add npm-run-all pug pug-cli stylus browser-sync autoprefixer-stylus -Dこのコマンドにより開発環境に必要なパッケージが全てインストールされました。このときにpackage.jsonを見ると以下のように「このパッケージたちを開発環境で使いますよ」ということが追加されています。
"devDependencies": {
"autoprefixer-stylus": "^0.14.0",
"browser-sync": "^2.26.0",
"npm-run-all": "^4.1.3",
"pug": "^2.0.3",
"pug-cli": "^1.0.0-alpha6",
"stylus": "^0.54.5"
}5. package.jsonにscriptsを書く
次は特定のコマンドを叩くといい感じにプレビューできるようにしたりビルドされたりするscriptsをpackage.jsonに書きます。以下をpackage.jsonに追加しましょう。
"scripts": {
"build": "npm-run-all --serial build:*",
"build:pug": "pug src/pug/*.pug -o ./dist",
"build:stylus": "stylus src/stylus/style.styl -u autoprefixer-stylus -o ./dist/css --compress",
"watch": "npm-run-all --parallel watch:*",
"watch:browser-sync": "browser-sync start --serveStatic ./dist --files ./dist --open",
"watch:pug": "pug src/pug/*.pug -o ./dist --watch",
"watch:stylus": "stylus src/stylus/style.styl -u autoprefixer-stylus -o ./dist/css --watch"
}package.json全体で見ると以下のようになります。
{
"name": "portfolio",
"version": "1.0.0",
"description": "portfolio",
"main": "index.js",
"scripts": {
"build": "npm-run-all --serial build:*",
"build:pug": "pug src/pug/*.pug -o ./dist",
"build:stylus": "stylus src/stylus/style.styl -u autoprefixer-stylus -o ./dist/css --compress",
"watch": "npm-run-all --parallel watch:*",
"watch:browser-sync": "browser-sync start --serveStatic ./dist --files ./dist --open",
"watch:pug": "pug src/pug/*.pug -o ./dist --watch",
"watch:stylus": "stylus src/stylus/style.styl -u autoprefixer-stylus -o ./dist/css --watch"
},
"repository": "https://github.com/xxx/yyy",
"author": "Taro Yamada",
"license": "MIT",
"private": true,
"devDependencies": {
"autoprefixer-stylus": "^0.14.0",
"browser-sync": "^2.26.0",
"npm-run-all": "^4.1.3",
"pug": "^2.0.3",
"pug-cli": "^1.0.0-alpha6",
"stylus": "^0.54.5"
}
}6. 開発環境ができたか確認
ここまでの手順ができて、
$ yarn watchのコマンドを叩き、http://localhost:3000/にアクセスすると空のページが表示されるはずです。これであとはPugとStylusでゴリゴリと実装していけば良い状態になりました。browser-syncもかかっているのでコードを保存すると自動的に最新の状態へ更新されブラウザでプレビューすることができます。
あとは開発するだけ
これで開発環境の構築は完了です。PugとStylusの記法に関しては以下が参考になるかと思います。
また、今回JavaScriptに関してはスルーしちゃったのですがbrowserify, watchify, uglify-jsあたりを使ってどうにかこうにかする方法はそのうち追記します。
また今回の構成を雑にリポジトリ作っておいたので煮るなり焼くなりしてください。