いい感じのフロントエンド開発環境を作ってみた

いい感じのフロントエンド開発環境を作ってみた
!HTML5'Minutes#6'∼triton.js∼!
©"2014"LIG"INC."@frontainer

自己紹介
林優一!@frontainer
!フロントエンドエンジニア
#ng$curry主催者)
AngularJSの勉強会を不定期で開催
HTML5Minutesでスタイルガイドについ
て話しました(前回のスライド)

フロントエンド開発環境について

フロントエンドがやること増えてきた

早く帰りたい

そうだ、仕事がる環境を作ろう

作りたかった環境
- 少しでも早く開発できる
- PC/SPどっちも同じ環境で作れる
- CIでデプロイしたりFTPアップしたりが簡単にできる
- 納品時のファイルがさくっと作れる
- JSはなるべく細分化して使い回しをしていきたい
- パフォーマンスは大事にしたいけど面倒くさいのはイヤ

必要な環境
- Gulp2
- WebPack
- Bower
- Karma/Jasmine
- PhantomJS

ディレクトリ構成
app/
┣ config.js <- ファイルの出力先などの設定をまとめているファイル
┣ pakage.jsonとか諸々
┣ gulp/ <- タスクごとにわけたgulpファイル
┣ guide/ <- スタイルガイド
┣ public/ <- コンパイルされたデータ
┗ source/ <- 開発用のソース
┣ pc/ <- PC用の開発ソース
┃┣ index.ejs <- EJSテンプレート（index）
┃┣ images/ <- 画像を入れる
┃┣ sprites/ <- スプライト画像を作る
┃┣ lib/ <- 単独で使う外部ライブラリ等を入れる(modernizrとか)
┃┣ sass/ <- scssファイルを入れる
┃┗ js <- jsファイルを入れる
┗ sp/ <- スマートフォン用の開発ソース
...(略

やってくれること
- SASSのコンパイル
- ベンダープレフィックスの自動付与
- ファイルや画像の圧縮
- LiveReload
- スプライト画像とSCSSの作成
- requireでスマートにJSを結合
- EJSを使ったテンプレート
- CSSの最適化
- ソースマップの書き出し
- ユニットテスト
- HTML/JSのLint

使うとき
$ npm i && bower i
$ gulp build
$ gulp
SCSSファイルとJS、EJSファイルの変更を監視して、%
変更があればpublic/pc/フォルダにファイルを書き出す

spディレクトリで開発するとき
$ gulp -d=sp
!dオプションにディレクトリ名を指定すると#
app/ディレクトリ名を作業ディレクトリとして#
ファイルの監視が行われる

JSやらCSSやらを圧縮して出すとき
$ gulp build -min
$ gulp build -d=sp -min
デプロイ時に実行するコマンド!
publicフォルダを一度クリアしてから圧縮したファイルを出力する

JS書くときの例

ディレクトリ
js/
┣ common.js <- bowerでインストールした外部ライブラリ専用
┣ app.js <- 手で書いたソースをまとめるファイル
┣ modules/ <- 使い回しできるファイル群
┗ util/ <- ユーティリティやPolyfillなどを入れる

modules/Hoge.js
function Hoge(){};
Hoge.prototype = {
init: function() {
}
}
module.exports = Hoge;

app.js
var Hoge = require('./modules/Hoge');
// ↑外部のJSを読み込み
var hoge = new Hoge();

保存するとWebPackが実行されて
[12:40:53] Version: webpack 1.4.15
Asset Size Chunks Chunk Names
common.js 3870 0 [emitted] common
app.js 464 1 [emitted] app
map/common.js.map 3818 0 [emitted] common
map/app.js.map 778 1 [emitted] app
[12:40:53] Webpack is watching for changes

public/pc/js/app.js
webpackJsonp([1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var Hoge = __webpack_require__(1);
var hoge = new Hoge('hage');
hoge.callName();
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var Hoge = function(name) {
this.name = name;
};
Hoge.prototype = {
callName: function() {
console.log(this.name);
}
};
module.exports = Hoge;
/***/ }
]);
//# sourceMappingURL=map/app.js.map

- SASSのコンパイル
- ベンダープレフィックスの自動付与
- ファイルや画像の圧縮
- LiveReload
- スプライト画像とSCSSの作成
- requireでスマートにJSを結合 <= ここの話
- EJSを使ったテンプレート
- CSSの最適化
- ソースマップの書き出し
- ユニットテスト
- HTML/JSのLint

続きは懇親会!or!Githubで

frontplateで検索
h"ps://github.com/frontainer/frontplate

ご静聴ありがとうございました
Follow%me%@frontainer

いい感じのフロントエンド開発環境を作ってみた

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à いい感じのフロントエンド開発環境を作ってみた

Similaire à いい感じのフロントエンド開発環境を作ってみた (20)

Plus de Hayashi Yuichi

Plus de Hayashi Yuichi (10)

いい感じのフロントエンド開発環境を作ってみた