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

いい感じのフロントエンド開発環境を作ってみた!HTML5'Minutes#6'～triton.js～!

©"2014"LIG"INC."@frontainer

自己紹介

林　優一!@frontainer

!フロントエンドエンジニア#ng$curry主催者)

AngularJSの勉強会を不定期で開催HTML5Minutesでスタイルガイドについて話しました(前回のスライド)


https://github.com/frontainer

http://connpass.com/event/9364/

http://connpass.com/event/9364/

http://www.slideshare.net/frontainer/css-living-styleguide



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


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


早く帰りたい


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


作りたかった環境- 少しでも早く開発できる- 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] appmap/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©"2014"LIG"INC."@frontainer

続きは懇親会!or!Githubで


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


https://github.com/frontainer/frontplate

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


https://twitter.com/frontainer

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

Internet

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