こんにちは、エンジニアのオオバです。

※2021年9月はてなブログをやめました

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

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

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

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

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

Mac環境でのお話です。

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

生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にやらせたい処理を書いていきます。

gulpfile.js · GitHub

このような感じで

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

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

test.scss

.hoge{  
  font-size:50%;  

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

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

gulp exportcss  

成功すると以下のようなログが出力されます。

すると以下のように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ファイルに変更があったら自動でコンパイルされるようにしています。

gulpfile.js · GitHub

ワークフロー

作業前

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 CLI v2.2.0 Local v4.0.2
• git v2.22.0

• 現場で使えるgulp入門 | 第1回 gulpとは何か | CodeGrid
• SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM