Gulp.js+Browsersyncでシンプルなマークアップ環境構築
記事の内容
HTML,CSS(SCSS)を用いたシンプルなマークアップ用の環境構築の一例
やりたいこと
- ReactやVueを使用しないマークアップの環境構築
- インデントなどの設定を開発メンバーで共有したい
- HTML,CSSの修正をリアルタイムで同期させたい
環境構築で設定するもの
- node.jsのインストール
- .gitignoreの設定
- gulpfileの設定
- editorconfigの設定
手順
node.jsインストール
node.jsのインストールに関しては調べれば色々記事があるので割愛します。
個人的にはバージョン管理ツールとしてvoltaを入れておくことをお勧めします。
既にvoltaをインストールしている場合は以下で最新のLTS版をインストール
volta install node
.editorconfigの設定
ルート直下に.editorconfigを設定することで、異なるエディタ・IDE間でも一貫したコーディングスタイルを定義、維持できます。
プロジェクトのコーディングルールに合わせて設定すれば、gitで管理している以上、メンバー間でコーディングスタイルを統一できます。
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = tab
max_line_length = 120
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
.gitignoreの設定
node_modulesや.vscodeはgitにあげたくないので、忘れないうちにルート直下に .gitignore の設定をしておきます。
node_modules
.vscode
gulp.jsとbrowser-syncのインストール
タスクランナーとして gulp.js をインストールします。
yarn add -D browser-sync
or
npm install -D browser-sync
browser-sync も gulp.js と連携させて使用するため、先にインストールしておきます。
yarn add -D gulp
or
npm install -D gulp
gulpfile.jsの設定
gulp.jsの設定をgulpfile.jsで行います。
browserSyncの連携やタスクの設定を記述します。
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var connectSSI = require('connect-ssi');
gulp.task('default', function() {
browserSync.init({
watchOptions: {
ignoreInitial: true,
ignored: [ '**/*.+(jpg|jpeg|png|gif|svg)', 'scss', 'node_modules']
},
middleware: [
connectSSI({
baseDir: './',
ext: '.html'
})
],
server: "./"
});
});
package.jsonにscript追記
package.jsonにgulpを実行するスクリプトを追記します。
"scripts": {
"start": "gulp"
},
環境立ち上げる
以下コマンド実行でBrowsersyncを実行します。
yarn start
or
npm run start
BrowserSyncを実行するとコンソールに以下のようなログが出ます。
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.2.114:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
ExternalのURLが立ち上がったローカルサーバーのURLになります。
感想
HTML,CSS(SCSS)を用いたシンプルなマークアップ用の環境構築の一例としてGulp.jsを用いましたが他にもGruntを使用する方法など、やり方は様々です。
モジュールバンドラー(webpackなど)を使用するとなると、設定まわりの学習コストがかかったりするので、プロジェクトの規模や目的によって適切なタスクランナーやもクールバンドルの選定が必要になります。
そのためにもいつくかは自分で環境構築を行なって導入の感覚を掴んで見たいと思いました。
参考記事
Discussion