フロントエンド環境構築(Gulp v4の導入からBrowsersyncの導入まで / ES6風味)
Gulpをインストールする。
Gulp公式サイト ではグローバルに gulp-cli
を、ローカルに gulp
をインストールするよう書かれているが、本記事では過去に書いたように、
基本的にグローバルインストール(
yarn global add [package]
)は行わない方針
という感じにする。以下の記事を参考にした。
Contents
- Contents
- Install Gulp
- Install Babel to write gulpfile.babel.js
- Project structure
- Install Browsersync
- References
- Related
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
- gulp-cliはインストールすべきじゃないと、思うよ - Qiita
- 別に $ npm install -g gulp しなくても大丈夫って話。 – Toro_Unit
- 絶対つまずかないGulp入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA
- 帰ってきたGulp 4 - Qiita
- GitHub - gulpjs/gulp: The streaming build system
- Webサイトのディレクトリ構造とその命名規則に悩む - Qiita
- gulp/minimal-browsersync-setup-with-gulp4.md at 4.0 · gulpjs/gulp · GitHub
- Re:ゼロから始めるgulpの便利なプラグイン生活 : エキサイト公式 エンジニアブログ
- .babelrcと.eslintはpackage.jsonに - Qiita
- テンプレート文字列 - JavaScript | MDN
- アロー関数 - JavaScript | MDN
Related
Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門
- 作者: 中村勇希
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
*1:トランスパイルと言うべき?