kgrss's blog

プログラムを中心にいろいろなことを記事にしていきます!

サイト更新計画〜gulpによる作業パイプライン〜

どうも、こがらしです。

前書き

現在自分のWEBページを新しいものにしようと考え、構築中です。 その上で今までMiddlemanだったりPadrinoだったりで作っていましたが、Gulpによる作業パイプラインを構築してその上でやっていこうと考えました。

今日のお話

Gulpを使って作るWEBサイト、の環境構築

なにをするか

  • nodebrewを入れる
  • nodejsを入れる
  • gulpや他のモジュールを入れる

こんな感じのことが必要になります
今回は、サイト構築に利用するhaml/sass/babelを一緒に入れていきます

nodebrewを入れる

今回はhomebrewを利用してインストールをします

brew install nodebrew

nodejsを入れる

自分はAWS Lambdaトの関係で古いですが4.3.2を入れました

nodebrew install v.4.3.2

gulp他を入れる

npm i -D babel
npm i -D babel-cli
npm i -D babel-preset-es2015
npm i -D browser-sync
npm i -D gulp
npm i -D gulp-haml
npm i -D gulp-scss

babel周りはgulpfileをes2015で書くようで追加しています。
今のところは、新しいWEBサイトにJSで何かしようというのは考えてないです

gulpfileを書く

今現在のgulpfileはこんな感じになっています
また、ファイル名はgulpfile.babel.jsで.babel.jsじゃないと認識してくれない点に注意してください

import gulp from 'gulp';
import haml from 'gulp-haml';
import sass from 'gulp-sass';
import browserSync from 'browser-sync';

gulp.task("browser-sync", ()=>{
  browserSync({
    server:{
      baseDir: "./build",
      index: "index.html"
    }
  });
});

gulp.task("reload", ()=>{
  browserSync.reload();
});

gulp.task("haml", ()=>{
  gulp.src("haml/**/*.haml")
  .pipe(haml())
  .pipe(gulp.dest("./build"));
});

gulp.task("scss", ()=>{
  gulp.src("scss/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("./build/css"))
});

gulp.task("build", ["haml", "scss"], ()=>{
});

gulp.task("default", ["build", "browser-sync"], ()=>{
  gulp.watch( "./haml/**/*.haml", ["haml", "reload"]);
  gulp.watch( "./scss/**/*.scss", ["scss", "reload"]);
});
  • browser-syncはいわゆるライブリロードをするためのモジュールになります。
  • reloadはそのまんまですが、browser-syncのリロード機能を呼び出します
  • haml/scssはそれぞれソースのコンパイルをします
  • buildはまとめて処理をするようです
  • defaultにはbuildとbrowser-syncの呼び出し、さらにhaml/scssの変更監視を加えています

まとめ

簡単にですが、こんな感じでgulpによるWEBページ作成環境を構築しています
皆さんも是非やってみてください!

こがらしでした!

ウィッシュリストの続きについて

どうも、こがらしです!

先週ドメインハックと題して、ちょっぴりだけ格好いいURLの使い方みたいなのを書きました
(本当に格好いいのかはわからないけれども)

というわけで完結したと思いきや、気になるところがあったのでそれに対応してみました。

一つ目は、真っ白ページが表示されてしまうこと!
二つ目は、ローディングに時間がかかってしまうこと!

この二つに関してちょっと施策をしました。
一つ目に関してはアマゾンのページぽっく内容のないナビゲーションバーを付け加えました。
本当はかっこよくNowLoadingみたいなのを作りたいんですけどね−。とりあえずということで!w

二つ目に関しては、2つ対応してみました。
一つはDNSプリフェッチ、もう一つはiframeによる読み込みです。
どっちもどの程度効果があるのかわかりませんけど、やっぱりこれもとりあえずですね!

ということで、簡単にさらっと施策を入れたお話でした!
プレゼント絶賛募集中です!w
http://wish.kogarasi.com

ドメインハック Part.1 with ウィッシュリスト

どうも、こがらしです。

今日は技術的なこととはちょっと離れたところにあるお話でもしようと思います。

事の始まりは友達のウィッシュリストのURLでした。
ウィッシュリストといえば何を思い浮かべますか?
たぶんAmazonのああ、あれあれ!ってなると思います。
けど友達のは違ったんですね。どう違うのかというと、amazonじゃなくて独自ドメインでした。
聞いたところによるとnginxでリダイレクトかけてるとのことでした。

ここでもっと何か良い方法はないかなと思って軽く調べてみました。
HTMLのMetaタグを利用することでリダイレクト出来るということだったのでその線で行くことにしました。
メリットはHTMLファイルなのでOGP設定が出来る点とS3でホスティングが出来ることです。
自分的には良い落としどころだと思ったので採用してみました。

そんなウィッシュリストはこちら↓(ステマ
http://wish.kogarasi.com

そんな感じで笑
今日はこの辺で

自分のサーバーのDocker環境について

どうも、こがらしです

今日は自分が利用しているサーバーでどんな風にDockerを利用して居るのかというのをつらつらと書いていこうと思います

まずDockerって言ったらDockerfileでしょ?これ切り離せないでしょ?
ってみんな思うんじゃないかと思いますが、自分の環境ではDockerfileを利用せずに運用しています。

まずは、イメージのビルドです。
イメージのビルドを行う際には、PackerとAnsibleを用いています。
Ansibleを利用することで複数のイメージを作成する際にサーバーのレシピを使い回すことが出来るようになります。
また、サーバーに対してべき等性を保つことが出来るようになります。
実際にはタダ自分がdockerfileを好かなかっただの理由で選びました。

次にイメージを実行する環境についてです。
dockerfileを使わないのにどうやって実行するの?ということになると思います。
この部分はdocker-composeを利用しています。
特徴としてはdockerfileに書いていた内容をYAML形式で記述できるようになり、dockerfileの書き方から離れられることです。
YAMLの読み書きのしやすさについては多くを語る必要はないでしょう。

三つ目はdocker使いを悩ますサービスをどう動かすかの部分です。 多くの環境でコンテナ内にsupervisorをインストールしてサービスを動かしていると思います。
自分の環境では、ホスト側にsupervisorをインストールしてdocker-composeを対象にサービス化を行っています。 個人的にはコンテナ内にsupervisorを置く必要がなくなるのとサービスの管理を一元化できるので良かったと思っています。
ただ、dockerのオプションでサービス化できるみたいですが。

こんな感じの環境でサービスを動かしています。
何かの参考になれば。

今日はこの辺で。

サイトのリニューアル

どうも、こがらしです。

求職活動中というのもあって、自分のサイトをリニューアルしました。 かなり今回は求職活動のためになるように寄せて作りました。

正直これ乗せちゃう?みたいのまで全部公開でやってます。 ちょびちょびとサイトもブログも更新できるように頑張っていきたいですねー。

http://kogarasi.com

もしよければかる〜く見てあげてください!

そんな感じの報告みたいなのですが、今日はこれで。

それではまた!