Posted at

Webサイト開発時の作業手順のメモ

More than 3 years have passed since last update.


はじめに

Bootstrapを使ってWebサイトを開発する際の作業手順の備忘録です.


作業手順


1. 環境構築

node.jsにscaffold(ソースの雛形)生成ツール Yeomanをインストールし,scaffoldを生成する流れです.

以下,具体的な作業手順です.


1.1 nvm(Node Version Manager)をインストール

公式サイトの手順に従いインストール.


1.2 Yeomanをインストール

こちらも,公式サイトの手順に従いインストール.


# npm install -g yo



1.3 Webサイト開発用ディレクトリを作成し,そのディレクトリ下に移動


# mkdir homepage

# cd homepage



1.4 開発するWebサイトのscaffoldをYeomanで生成

今回はタスクランナーとしてgulpを使います.なのでgeneratorはgulp-webappを選びます.


# yo

# What would you like to do?で,Install a generatorを選択

# Search npm for generators:で,gulp-webappを入力

# Install one?で,gulp-webappを選択

# What would you like to do?で,Gulp Webappを選択

# What more would you like? (Press to select)で,Sass, Bootstrap, Modernizrを選択



1.5 生成されたscaffoldの動作をgulpで確認

タスクの内容は,ディレクトリ下にあるgulpfile.babel.jsに記載されています.以下のコマンドでWebサーバが起動し,ブラウザで動作を確認することができます.


# gulp serve



2. 実装

あとは以下などを参考にしながら,実装を進めています.