klim.log()

フロントエンドエンジニア見習いによる学習記録

フロントエンド環境構築(Gulp v4の導入からBrowsersyncの導入まで / ES6風味)

Gulpをインストールする。 Gulp公式サイト ではグローバルに gulp-cli を、ローカルに gulp をインストールするよう書かれているが、本記事では過去に書いたように、

基本的にグローバルインストール(yarn global add [package])は行わない方針

という感じにする。以下の記事を参考にした。

Contents

Install Gulp

という訳で、ローカルごとにgulpをインストールするようにしていく。 前記事でYarnをインストールしたため、これからはYarnでパッケージのインストールを行う。

なお、Gulp v4が正式にローンチされたとのことなので、思い切ってv4をインストールする。

$ yarn add --dev gulp@next
# gulpでv3が、gulp@nextでv4がインストールされる。

yarn add v1.5.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 285 new dependencies.
info Direct dependencies
└─ gulp@4.0.0
info All dependencies
├─ abbrev@1.1.1
# (中略)
└─ yargs@7.1.0
✨  Done in 23.22s.

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^4.0.0"
  }
}

gulpのバージョンを確認してみる。 yarn run で、ローカルインストールされたパッケージを動かすことが出来る(npmで言う npx) なお、runを省略して yarn でも動作可能。

$ yarn gulp -v
yarn run v1.5.1
$ /Users/[account]/your/project/path/node_modules/.bin/gulp -v
[12:34:56] CLI version 2.0.1
[12:34:56] Local version 4.0.0
✨  Done in 2.61s.

Install Babel to write gulpfile.babel.js

Gulpでタスクを動かせるためにgulpfileを用意する。

通常であればES5で書いていくのだが、2018年にもなったので思い切ってES6で書いていこうと思う。

基本的にリンク先のやつを見つつ、適宜書き換えておくつもりで。

Install Babel

ES6をES5に変換させるために、まずはbabelをインストールする。

$ yarn add --dev babel-register babel-preset-es2015

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "gulp": "^4.0.0"
  }
}

Add .babelrc

babelrcを用意して、プロジェクトのルートフォルダに配置する。

{
  "presets": [ "es2015" ]
}

ここの記述はpackage.jsonに書いてもいいらしい(今回は見送る)

gulpfile.js ではES6で書いても動作しないため、 gulpfile.babel.js にリネームして記述していく(記述内容は後述)。

Project structure

ここで、これまでのファイル構成を確認しつつ、htmlファイル等の基本的なプロジェクト用ファイルの配置先も決めておく。

.
├── .babelrc
├── .gitignore
├── gulpfile.babel.js
├── package.json
├── yarn.lock
├── node_modules
│   ├── abbrev
│  (中略)
│   └── yeast
└── public       <- ここに配信するファイルを配置
     ├── assets  <- html以外のファイルをassetsに格納
     │   ├── images
     │   │   ├── Sample-image.png
     │   │   └── Sample-image.svg
     │   ├── scripts
     │   │   ├── script.js
     │   │   └── vender
     │   │       └── jquery-3.3.1.min.js
     │   ├── styles
     │   │   ├── css
     │   │   │   └── style.css
     │   │   ├── scss
     │   │   │   └── style.scss
     │   │   └── webfonts
     │   └── templates
     │       └── index.pug
     └── index.html

改めてファイル構成について真面目に考え始めたら中々決まらず迷った。

同じような悩みを抱えている人がいるのを知り、少しホッとした(よくねえ)

いずれPugというテンプレートエンジンを用いたコーディング環境を整えたいと思っているが、そのファイルを配置するディレクトリ名で一頻り悩んだ。苦し紛れに templates ディレクトリを用意したが、納得はしてない…。

Install Browsersync

これからいよいよ、具体的なパッケージを動かそうと思う。

最初に、BrowsersyncをGulpで動かせるようにしたいと思う。

まずは以下のコマンドを叩く。

$ yarn add --dev browser-sync

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.1",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "browser-sync": "^2.23.6",
    "gulp": "^4.0.0"
  }
}

ここで gulpfile.babel.js を用意する。

構成は下記ページからコピペ。

適宜ES6の文法に置き換えつつ記述していく。テンプレート文字列アロー関数 を用いてみたが、シンプルに記述できていい感じ。

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


// Settings    <- ディレクトリ構造に応じて適宜いい感じに
const rootDir = `./public/`;
const assets  = `${rootDir}assets/`;
const paths   = {
  html: `${rootDir}**/*.html`,
  css : `${assets}styles/css/**/*.css`,
  scss: `${assets}styles/scss/**/*.scss`
};


// Browsersync <- Browsersyncによる再表示とローカルサーバー起動の設定
const server = browserSync.create();
const reload = (done) => {
  server.reload();
  done();
};
const serve = (done) => {
  server.init({
    server: {
      baseDir: rootDir  // rootDir = `./public/`;
    }
  });
  done();
};


// Watch       <- どのファイルの変更を監視し、それに応じてどのメソッドを発動させるのかを記述
const watch = () => {
  gulp.watch([paths.html,paths.css],reload) // htmlとcssが更新されたらreloadメソッド発動
};


// ローカルサーバーと監視を直列処理する
const dev = gulp.series(serve, watch);
export default dev;

以下のコマンドでGulpを実行!

$ yarn gulp

yarn run v1.5.1
$ /Users/[account]/your/project/path/node_modules/.bin/gulp
[12:34:56] Failed to load external module @babel/register # Babel関連でエラーが出てるけど無視
[12:34:56] Requiring external module babel-register       # 上記エラーはここで解決されている模様
[12:34:56] Using gulpfile ~/your/project/path/gulpfile.babel.js
[12:34:56] Starting 'default'...
[12:34:56] Starting 'serve'...
[12:34:56] Finished 'serve' after 19 ms
[12:34:56] Starting 'watch'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000     # 自動的にこれがブラウザで表示される
    External: http://192.168.11.6:3000  # 同じネットワーク上の機器であればこのURLから確認できる(スマホとかで開くと便利)
 -------------------------------------
          UI: http://localhost:3001     # Browsersyncの設定画面
 UI External: http://192.168.11.6:3001  #          〃
 -------------------------------------
[Browsersync] Serving files from: ./public/

http://localhost:3000 にアクセスすると、./public/index.html の内容がブラウザで開かれている。この状態で、テキストエディタindex.html を編集・保存をすると、自動でブラウザも更新される。また、ターミナル内の表示も更新(追加)される。

# (略)
 UI External: http://192.168.11.6:3001
 -------------------------------------
[Browsersync] Serving files from: ./public/
[12:34:56] Starting 'reload'...
[12:34:56] Finished 'reload' after 1.17 ms
[Browsersync] Reloading Browsers...

ここまでで、HTMLやCSSを更新する度に、自動で複数の端末で自動リロードするという環境が整った。

次はSCSSファイルをCSSコンパイル*1する方法を実装したい。

References

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

*1:トランスパイルと言うべき?