gulpの見直し

[ghost]

説明長いですがご確認ください。

概要(Overview・Refs Issue)

gulpを4系にバージョンアップ
3系でも問題ないが、折角なので高機能な4系にバージョンアップ
バージョンアップに合わせた記述方法の見直し。ES6に書き方を統一。
バージョンアップにより高速化、並列処理が可能になった。

npm scriptの見直し
同じgulpコマンドが冗長に記述されていて、実行される内容が把握しにくかったので整理、機能追加による追記。
名前も分かりやすく、入力しやすいよう考慮。
gulp task = npm script になるようにした。

npmの見直し
利用されていないパッケージが含まれていたため、削除。
新たに追加したパッケージはなるべく手入れされているものを選択。

gulp機能の追加『監視』

$ npm run watch
$ npm run watch:min

終了コマンドはMac: command + c, Windows: ctrl + c

開発をする際にコマンドを叩きながら確認をするのが大変だったので、ソースコードを監視する機能を追加。
ファイルに変更があればtaskが実行される。

gulp機能の追加『監視 + ローカルサーバー』

$ npm run server
$ npm run server:min

終了コマンドはMac: command + c, Windows: ctrl + c

監視機能に加えて、ライブリロードを追加。
これによりいちいちブラウザを更新する手間がなくなる。

default以外のテンプレート名に対応
admin, defaultしか対応していなかったので（手動での追加は出来た）、新たに追加したものもコンパイルされるように修正。

ディレクトリ変更に耐えられるように修正
新たにgulpconfig.jsを追加しました。
configでルートを指定出来るように修正。
これにより、デフォルトとは違うディレクトリ構造の環境でも耐えられるようになりました。

gulpfileを分割しやすいように設計
まだタスクがsassだけなので良いが、jsやimgなど増えた場合の事を考え、ファイルを分割できように各タスクをモジュール化。

gulp minify-cssの問題を修正
.cssを作成した後でないと、正しいファイルが出力されない。
コマンドを統一化することにより対処。

メディアクエリ問題を修正
#4191 をfix
値の小さいメディアクエリから順になるようにソートした。

方針(Policy)

コメント
コードは見やすく書いたつもりだが、ぱっと見でタスクの内容が把握出来ないのでコメントを記載。
gulpfileを分割するようになればこの程度のコメントなら不要かもしれない。

npm scriptの見直し
既存のnpm scriptをフォールバックとして残そうかと思ったが、コマンドが増えすぎて利用すべきコマンドが分かりにくくなるのを避けるため、不要なコマンドを削除した。

npmの見直し
bootstrapにアップデートがあることの警告が出ているが、確認作業が大変なことになるのでアップデートせず。

実装に関する補足(Appendix)

改善点

user_dataの見直し
/html/user_dataはscssをコンパイルしないが、scssを用意にコンパイル出来る環境になったので、/html/user_dataを各テンプレート内に作成してもらったほうが良いかもしれない。

例：/html/template/default/assets/scss/customize.scssなどにする。
関連：#4071

注意点

node.jsのバージョン
gulpを4系に上げたことにより、ある程度新しいnode.jsが求められるので、node.jsのバージョンアップが必要な場合もある。
グローバルgulpを導入し、gulpコマンドを直接実行していた場合は、バージョン違いにより実行出来ないため、npm scriptを利用すること。

ローカルサーバーURL, gulpconfig.js
ローカルサーバーのURLは個人によって違うため、gulpfile.jsに含めたくなかった。（git管理が出来なくなるため）
そのためgulpconfig.js.sampleをgulpconfig.jsに変更し、module.exportsのserverを変更する必要がある。
gulpconfig.jsはgitignore済み。

gulpconfig.jsを作成しないと以下コマンドは利用できない。
gulpconfig.jsが存在しないときに実行するとエラーを表示するようにした。

$ npm run server
$ npm run server:min

gulpconfig.jsが存在しない場合でも、上記コマンド以外はデフォルトのディレクトリ構造でフォールバックしているため、実行可能。

問題点

コンフリクト問題
npm scriptを分かりやすくするため、minファイルも同時に出力しているため、既存の問題 #4332 に加え.min.cssもコンフリクトを起こすようになる。

mapファイルの出力場所
baseを使ったディレクトリ指定によるsourcemapの不具合?仕様?により、mapsディレクトリ内にsourcemapを出力することが出来なかった。

利用方法

モジュールの更新
追加、削除したモジュールを更新する

$ npm ci

gulpconfig.jsを作成する。
gulpconfig.js.sampleをgulpconfig.jsにリネームする。
gulpconfig.jsのサーバーを自身のローカルサーバーのURLを指定する。
ディレクトリ構造に変更がある場合はpathsを変更する。（通常は不要）

module.exports = {
  server: 'http://localhost:8888',
  ...
};

コマンド

// scssファイルのコンパイルを行う。
// 圧縮・非圧縮cssを出力
$ npm run build

// scssファイルのコンパイルを行い、変更があるファイルの監視を行う。
// 圧縮・非圧縮cssを出力
$ npm run watch

// scssファイルのコンパイルを行い、変更があるファイルの監視を行う。
// 非圧縮cssを出力
$ npm run watch:min

// scssファイルのコンパイルを行い、ライブリロードを行う。
// 圧縮・非圧縮cssを出力
$ npm run server

// scssファイルのコンパイルを行い、ライブリロードを行う。
// 非圧縮cssを出力
$ npm run server:min

相談（Discussion）

全てのscssをすべてのコマンドで.min.cssを出力するにしたので、.min.cssを標準で利用するのはどうでしょうか？（軽いのでクライアントに優しい
そうすれば.cssを利用するのはsassを利用できない人だけになります。
sassを利用できない人にはnpm scriptは不要なので、package.jsonがもう少しスッキリ出来ます。さらにgulpが高速化出来ます。

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更
• フックポイントの呼び出しタイミングの変更
• フックポイントのパラメータの削除・データ型の変更
• twigファイルに渡しているパラメータの削除・データ型の変更
• Serviceクラスの公開関数の、引数の削除・データ型の変更
• 入出力ファイル(CSVなど)のフォーマット変更

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか

[chihiro-adachi]

@katsunori-nakayama
おお、ありがとうございます！
確認してコメントします😄

[chihiro-adachi]

@katsunori-nakayama

遅くなりましたが動かしてみました。一通り問題なさそうです。
※node v12.3.1 / npm 6.12.0 で確認しています。

コマンドの実行例、npm script xxxと記載されていますが、npm run xxxが正しいでしょうか？
npm script xxx だとエラーになってしまったので。

[ghost]

@chihiro-adachi
失礼しました。私の誤表記で、おっしゃるとおりnpm run xxxが正しいです。

[chihiro-adachi]

@katsunori-nakayama
ありがとうございます！

全てのscssをすべてのコマンドで.min.cssを出力するにしたので、.min.cssを標準で利用するのはどうでしょうか？

そうですね。将来的にはその形でもよいかと思います。
ただマイナーバージョンの修正としては影響が大きいので、こちらについては今後のメジャーバージョンのタイミングで検討できればと思っています。

[ghost]

@chihiro-adachi
分かりました。😁

[okazy]

以下のコマンドを確認して問題なく動作することを確認しました。

$ npm ci
$ npm run build
$ npm run watch
$ npm run watch:min
$ npm run server
$ npm run server:min

すごく便利ですね。

[ghost]

うっかりBootstrapのバージョンアップを行っていたようなので、バージョンを戻しました。

[okazy]

ありがとうございます。
取り込みました。