渋谷ほととぎす通信

新しいこと、枯れたこと問わず大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。

はてなブログのCSS更新をGulp+Sass+gitで半自動化管理してみる


本ブログははてなブログを使っています。 使われたことのある方は分かると思いますが、CSSを気軽にいじれません。

はてなブログを管理画面から直接生CSSを入力する必要があります。

ブログデザインをいじりたくなったのでCSS更新のワークフローを改善しました。

詳しくは上の記事に書いてありますが、Dropboxで同期しているパソコン上のCSSを変更するだけでブログデザインを変更できるようになりました。


今回はもう少し踏み込んで、生のCSSを書くのをやめ、デプロイ作業を自動化、運用の安全性を上げてみたいと思います。

Mac環境でのお話です。

生CSSから脱却

とりあえず以前使ったことのあるSass、それに近しい、CSSジェネレートツールを探しました。

現役のWebフロントの人に聞いたら現在もSassは現役とのことで、PostCSSも来ているとのことで、SassとPostCSSでワークフローを構築できないか調査しました。

その結果、以下のようなワークフローを組んでみたいと思います。

  1. SassでCSSを組む
  2. SassをCSSにコンパイル
  3. CSSをGithubにCommit + Push
  4. Dropboxの同期ファイルをコピー

Gulpを導入

このワークフローを実現するためにタスクランナー的なビルドシステムであるGulpを導入します。

GulpはNodeJS製のパッケージなのでnpmでインストールします。

もしnpmがインストールされていない場合は、HomeBrewでインストールします。

brew install npm

npmでGulp、GulpのSassプラグインをインストールしておきます。 今回はローカルにインストールするため、事前に開発フォルダ(~/workspace/blog/で作業する前提)に移動しておきます。

cd ~/workspace/blog/

npm inastall gulp gulp-sass -D
  • node_modules
  • package-lock.json

するとこのようにフォルダ1つ、JSONファイルが1つ出来上がります。

gulpfile.jsにGulpの処理を書いていく

先のパス(~/workspace/blog/)にgulpfile.jsを作成し、Gulpにやらせたい処理を書いていきます。

このような感じで

~/workspace/blog/src/ディレクトリ内の*.scssファイルをコンパイルして、~/workspace/blog/dest/ディレクトリに書き出されるシステムができました。

試しに以下のようなテストのscssファイルを作って以下のコマンドでコンパイルしてみます。

test.scss
.hoge{
  font-size:50%;
  
  .foo{
    font-size:100%;
  }
}

以下のコマンドでコンパイル。

gulp exportcss

成功すると以下のようなログが出力されます。 f:id:esakun:20190816230059p:plain

すると以下のようにCSSが出力され、ちゃんと動いている事が確認できました。

test.css
.hoge {
  font-size: 50%;
}

.hoge .foo {
  font-size: 100%;
}

Gulpコマンドが見つからない場合

gulp: command not found

今回Gulpをローカルにインストールしていますが、ローカルのGulpを動かすためにはグローバルにも一度インストールしておく必要があるようで、-gオプションをつけてインストールします。

npm install -g gulp

すると動くようになると思います。

コンパイル後の処理を追加していく

コンパイルは成功できたので、当初の予定の通りGithubにCommit、Pushします。

gulp-git、gulp-git-pushプラグインをインストールします。

npm i gulp-git gulp-git-push -D
オプション「i」は「install」のショートカット
const git = require('gulp-git');
const push = require('gulp-git-push');

プラグインのRequireして、gitへバックアップするタスク、所定の場所にコピーするタスクを作成します。

gitへバックアップするタスク

※事前に~/workspace/blog/.gitを作っておく必要があります。

gulp.task('backup', function () {
  return gulp.src(['./dest/*.css','./src/*.scss'])
    .pipe(git.add())
    .pipe(git.commit(new Date().toString()))
    .pipe(push());
});

gulp-git-pushの参考 : gulp-git-push - npm

所定の場所にコピーするタスク

gulp.task('deploy', gulp.series('backup', function(){
  return gulp.src('./dest/*.css')
    .pipe(gulp.dest('../'));
}));

これで必要なタスクは実装完了しました。

ソースコード

最終的にはこんな感じになりました。 watchタスクを追加し、scssファイルに変更があったら自動でコンパイルされるようにしています。

ワークフロー

作業前

CSS(scssファイル)編集作業する前に以下のコマンドでscssを監視します。

gulp watch

この状態ではscssを変更すると自動でcssが書き出されます。

CSSの反映

CSSが完成したら、はてなブログに反映させるためにDeployします。

gulp deploy

deployすると、gitにバックアップという意味でpush、Dropboxにコピーされます。

残タスク

やば!!ミスった!!ってなった時のタスクを作成する必要があるかなと思います。 1つ前のコミットに戻す、ハッシュを指定して戻すの2種類かなと。

現状はgitコマンドでファイルを元に戻して再度ファイルコピータスクをするだけでリカバリーできます。

複数環境を用意すべきではあるが...

はてなブログを使用している以上、ステージング環境などあったものではないので、CSS反映も一発勝負になってしまいますが、まあ、その辺は個人ブログなのでそこまで頑張らなくても良いかなと思っています。

現状のブログをクローンして、非公開にし、そちらをテスト環境とするということもやろうと思えばできそうです。

最後に

GulpとSassを使うことでだいぶCSS更新が楽になりました。
gitでバックアップすることで安全性も増し、今後も安心して運用ができそうです。

余談

インターネットにGulpバージョン3と4の情報が混ざってて、少し焦りました。srcの引数は2つになったという変更でハマりました。

ちなみに、今回Gulpを初めて使っていましたが、面白いですね。間違いなどありましたらご指摘ください。

環境

  • macOS Mojave 10.14.5
  • gulp -v
    • CLI version: 2.2.0
    • Local version: 4.0.2
  • git --version 2.22.0

参考