gulp + Webpack 3を利用して、2017年12月現在の最新フロントエンド開発環境を構築しました。Pug、Sass、ES2015以降、画像圧縮、スタイルガイド生成、CSS Sprite、SVG Spriteに対応しています。

最近のフロントエンド開発では、CSSはSass（SCSS）形式で記述しCSSを生成、JavaScriptはECMAScript 2015以降の書き方をして、Babelなどトランスパイラツールで古いブラウザが読み取れるECMAScript 5に変換、HTMLもPugやejsといったテンプレートエンジンを利用してHTMLファイルを生成する方法がよく紹介されています。

この辺のツールは流行り廃りが激しく、grunt、gulp、Webpack、npm script、Parcelとどんどん新しいやり方がでてくるのですが、案件ごとに都度作り直ししていても効率的ではないので、メンテナンスしながら利用できるようにGithub上にあげました。

frontend-starter-kit

できること

• BrowserSyncによるオートリロード
• Pugを利用したHTML生成
• Sassのコンパイル
  • PostCSS
    • Autoprefixer
    • メディアクエリの記述まとめ
  • minify
  • npmで読み込んだcssモジュールの読み込み
• JavaScriptはWebpack3によるES2015以降の対応
  • Babel（env）
  • minify
  • eslint（airbnb）
  • React/Vue.jsの利用
• StyleGuideの生成
  • fractalを利用したコンポーネントベースのガイド生成
• その他
  • 画像圧縮(png/jpg/svg/gif)
  • Sprite(png/svg)の生成

動作確認環境

• macOS
• node >= 9.3.0
• gulp >= 3.9.1
• sass >= 3.4.24

使い方

yarnを使ってインストールします。

# clone
$ git clone git@github.com:raym-design/frontend-starter-kit.git
$ cd frontend-starter-kit

# Install Dependencies
$ yarn install

# Run the Application
$ yarn run start

# Deploy for production
$ yarn run dist

ルート直下のディレクトリ/ファイル

.
├── .babelrc
├── .browserslist
├── .eslintrc
├── .gitignore
├── .sprite-png-template
├── .sprite-svg-template
├── fractal.config.js
├── gulpfile.js
├── package.json
├── README.md
├── dist -> client-side public
├── docs -> fractal components guide
├── src -> development-side
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock

基本的には./src/以下を編集し、deploy時にdistコマンドによってpublishされるファイルが./dist/以下に生成されます。

個人的によく使う機能をいくつかご紹介します。

Pugでの変数管理

生成した各HTMLページのmeta情報を一括で更新できるように、description、keywordsなどの情報はjsonファイルでまとめています。

継承元で変数を参照するようにする

pugにはextends機能で、ベースのテンプレートを各pugファイルに継承するレイアウト機能のようなものがあります。そこで、下記のように予め定義しておき、各pugファイルで変数を上書きするようにすれば、meta情報を更新できます。

block meta
  if description
    meta(name='description', content=description)
  if keywords
    meta(name='keywords', content=keywords)

https://github.com/raym-design/frontend-starter-kit/blob/master/src/pug/inc/core/_base.pug

setting.jsonの参照

pugファイルからは、下記のような形で変数にアクセスできます。これで、先に定義したdescriptionなどは、page.top.descriptionを参照するようになります。

block prepend meta
  - var keywords = page.top.keywords
  - var description = page.top.description

https://github.com/raym-design/frontend-starter-kit/blob/master/src/pug/index.pug

setting.jsonで一括管理

./src/pug/setting.jsonは下記のようにしています。

{
  "name": "site name",
  "url": "",
  "page":{
    "top":{
      "title": "",
      "description": "",
      "keywords": "",
      "ogimage":"",
      "url": ""
    }
  }
}

https://github.com/raym-design/frontend-starter-kit/blob/master/src/pug/setting.json

Autoprefixerによるベンダープリフィックスの適応

PostCSSを利用してAutoprefixerを適応しています。Autoprefixerのブラウザ対象は.browserslistを編集することで対象範囲を変更できます。

> 1% in JP
Last 2 versions

gulp-pleeeaseが2015年で更新が止まってしまっているためか、.browserslistファイルによる更新が適応できなかったのでAutoprefixerに切り替えました。

npm経由で追加したCSSファイルのインポート

normalize.cssなどnpm経由でいれたCSSファイルは@import後に展開できないため、そのまま@import url()といった外部CSSのimportになってしまいます。これを展開できるようにしました。

@import "~normalize.css";

~を先頭につけるだけです。

画像圧縮

ぱくたその公式ブログでも触れていますが、画像圧縮処理を組み込んでいます。

画像の一括処理とかが面倒だったので、JPEGminiに代わるソフトを探していたら、Mozllaからリリースされているソフトが優秀でした。 http://www.voralent.com/ja/products/antelope/

上記ではGUIが紹介されていますが、Mozjpegはgulp-imageminのプラグインで対応可能です。jpegの圧縮処理には画像圧縮処理は、distするタイミングのみ走るようにしています。これは、watchで毎回走ると処理が遅くなるからです。

CSS Sprite

backgroundで読み込むCSS Sprite（png）とSVG Spriteに対応しています。SVGのインライン対応（useなど）はブラウザ対応が限定化されるので、別途追加で考え中。

./src/img/sprite
├── png
└── svg

pngフォルダにSpriteにするpng形式の画像を、svgフォルダにsvg形式の画像を入れます。 これらがgulpによって、./src/img以下にファイルが生成されます。

./src/img
├── sprite.png
└── sprite.svg

使い方は下記のような感じ

// spriteのpngファイルを読み込む
.icon {
  @include sprite-ir(iconname);
}
// spriteのpngファイルのRetina対応
.icon-retina{
  @include sprite-ir(iconname, $mobile:true);
}
// spriteのsvgファイルを読み込む
.icon-svg{
  @include sprite-ir(iconname, $svg:true);
}

改めてこういう開発環境は一度作ってしまえば拡張しやすいので、基礎作りしておくのにこしたことはないですね