自サイトの開発環境を作った

自サイト「Neo's World」を最近リニューアルしている。といっても、見た目はほとんど変わらない。変更したのは裏側、開発環境が主だからだ。

開発環境およびソースコードは以下の GitHub リポジトリに公開している。

導入している npm パッケージ

現時点の package.json より依存パッケージをリストアップする。

  "devDependencies": {
    "@neos21/gulp-template-html": "^1.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.13",
    "browserify": "^14.4.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-changed": "^3.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-watch": "^4.3.11",
    "htmlhint": "^0.9.13",
    "run-sequence": "^2.1.0",
    "textlint": "^8.2.1",
    "textlint-plugin-html": "^0.1.5",
    "textlint-rule-ja-hiragana-hojodoushi": "^1.0.4",
    "textlint-rule-ja-no-abusage": "^1.2.1",
    "textlint-rule-ja-no-redundant-expression": "^1.0.3",
    "textlint-rule-ja-no-successive-word": "^1.0.2",
    "textlint-rule-max-ten": "^2.0.3",
    "textlint-rule-no-doubled-conjunction": "^1.0.2",
    "textlint-rule-no-doubled-conjunctive-particle-ga": "^1.0.2",
    "textlint-rule-no-doubled-joshi": "^3.5.1",
    "textlint-rule-no-dropping-the-ra": "^1.1.2",
    "textlint-rule-no-mix-dearu-desumasu": "^3.0.3",
    "textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet": "^1.0.1",
    "textlint-rule-no-nfd": "^1.0.1",
    "vinyl-source-stream": "^1.1.0"
  }

基本は Gulp タスクでアレコレ作っていて、TextLint を別で入れていたりする。

以前紹介した @neos21/gulp-template-html を自分で使って、テンプレート HTML とデータ HTML を組み合わせてビルドするようにしている。これでテンプレの差し替えが楽になった。

CSS は SCSS で作成するように移行して、ES2015 で JS が書ける環境も揃えた。が、JS を使うタイミングは今のところない。

その他の画像ファイルなどは Gulp で dist ディレクトリにコピーするだけで、圧縮などはしていない。

IDE は VSCode

これまで Atom を使っていたが、圧倒的な動作の軽さと、安定したターミナルが標準装備というところで、VSCode に乗り換えた。

Beautify、EditorConfig、HTMLHint を入れてコードの整形や Lint を行っている。

開発時はターミナルでライブリロードを実行しっぱなしにしておいて、Browser-Sync で表示を確認しながらコーディングしている。

文章校正

文章校正には TextLint を使用している。まだ設定しながらではあるが、プラガブルにルールを追加・設定していけるので良い。常体・敬体が混在していたので、template-html を使ったテンプレ化をしつつ、常体に統一しようと考えている。

サイトのアップロード

ココまできたらサイトのデプロイも自動化したいが、ホスティングしている XREA とは何も連携していないので、手動で FFFTP を使ってアップロードしている。コマンドラインから FTP アップロードとかできたりしないかなぁ～。

チマチマと自分が望んだ環境を構築できていて、自己満足している。