フロントエンド開発の効率を上げるテンプレート
** Version3.1.0 Released!! **
※ npm3でのみ動作確認しています
npm update -g npm
- HTMLモジュール（EJS）
- SASS
- SASSLint
- ES2015
- スプライト画像の作成とSassファイルの出力
- JS/CSSの圧縮と最適化
- CSSのベンダープレフィックス付与自動化
- 非対応CSSプロパティアラート
- ユニットテスト（Mocha/PowerAssert）
- LiveReload
- ESLint
- HTMLHint
- スタイルガイド生成
- JS/CSSソースマップ
npm i -g gulp
package.json - nomパッケージ設定ファイル
config.js - テンプレートの設定ファイル。出力先やgulpの設定を変更できる
karma.conf.js - Karmaの設定ファイル
webpack.config.js - WebPackの設定ファイル
gulpfile.js - gulpファイル
npm-shrinkwrap - npmパッケージのバージョン固定ファイル
/gulp - gulpのタスクがたくさん入ってる
/public - コンパイルされたデータが入っている
/src - 開発用フォルダ
┣ /pc
┃ ┣ /images - 画像を入れるフォルダ。public/pc/imagesに複製される
┃ ┣ /js - JSフォルダ。ES6で書ける。直下にあるJSは
┃ ┃ ┣ app.js - public/pc/js/app.jsとして出力される
┃ ┃ ┗ /modules
┃ ┃ ┗ hoge.js - ここファイルは出力されないが変更は監視される
┃ ┣ /lib - ライブラリフォルダ。外部ライブラリ等を置く。public/pc/libに複製される
┃ ┣ /sass - sassフォルダ。ファイル名が_(アンダースコア)で始まっていないscssはpublic/pc/cssに出力される
┃ ┣ /sprites - スプライト生成フォルダ。ここに作ったフォルダがsass/sprites/_フォルダ名.scssとして出力される
┃ ┃ ┗ /icon - スプライト画像を入れるフォルダ。class="icon icon-ファイル名"で参照されるので英数字推奨
┃ ┣ /test - テストコードを置くフォルダ。ここにおいたファイルはテストコードとして実行される
┃ ┗ /view - ビューファイル(ejs)を置くフォルダ。ファイル名が_(アンダースコア)で始まっていないejsはpublic/pcに出力される
┃ ┣ index.ejs - public/pc/index.htmlとして出力される
┃ ┗ parts/
┃ ┣ _header.ejs - アンダースコアから始まるファイルは出力されない
┃ ┗ sub.ejs - public/pc/parts/sub.htmlとして出力される
┗ /任意のフォルダ - 任意のフォルダを作ってpcと同じ構造を作ることができる
/templates - テンプレートファイルフォルダ
┗ sprite.ejs - スプライト画像用テンプレート
frontplateを任意のディレクトリに展開し、展開したディレクトリで以下のコマンドを実行します。
npm run start
すべてのファイルをビルドします。開発を始める前に必ず一度はビルドしましょう。
gulp build
以下のコマンドを実行するとブラウザで開発中のページが開きます。この状態でCSSやJSを修正するとユニットテストやLintも同時に実行され、ブラウザが自動的に更新されます。
# ディレクトリを監視(src/pc)
gulp
# 指定ディレクトリを監視（src/spディレクトリを監視する例)
gulp -sp
複数の画像をタイル上に１枚の画像にするスプライトを自動的に生成します。images/spites以下のディレクトリごとにスプライト画像とsassファイルを出力
# スプライト生成
gulp sprite
# 指定ディレクトリのスプライト生成
gulp sprite -sp
sprites/icon/icon-twitter.png
sprites/icon/icon-twitter.png
↓ gulp sprite
images/sprites/icon.png
sass/sprites/_icon.scss
スプライト画像はimages/sprites/*.pngに、sassはsass/sprites/_*.scssに展開されるので、作られたsassを@importして使用します。
ディレクトリ名の末尾を-2xにすることで自動的にsass上でサイズを1/2して表示されるようになります。
sprites/icon-2x/icon-twitter.png
sprites/icon-2x/icon-twitter.png
ビルドや監視が不要でサーバーのみ起動したい場合は以下のコマンドを使用します。
# サーバー起動
gulp server
# 指定ディレクトリでサーバー起動
gulp server -sp
ひと通りの開発が完了した時点で、リリース用のファイルを作成します。production タスクではJSとCSSのソースマップが出力されなくなります。
gulp production
ユニットテストのみを実行します。
gulp test
config.js にテンプレートの出力先やプラグインのオプション設定が記述されています。
詳しくはconfig.js のコメントを参照してください。
- JS: Modernizr