サイト更新計画〜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ページ作成環境を構築しています
皆さんも是非やってみてください！

こがらしでした！