いい感じのフロントエンド開発環境を作ってみた
-
Upload
hayashi-yuichi -
Category
Internet
-
view
16.888 -
download
3
Transcript of いい感じのフロントエンド開発環境を作ってみた
自己紹介
林 優一!@frontainer
!フロントエンドエンジニア#ng$curry主催者)
AngularJSの勉強会を不定期で開催HTML5Minutesでスタイルガイドについて話しました(前回のスライド)
©"2014"LIG"INC."@frontainer
作りたかった環境- 少しでも早く開発できる- PC/SPどっちも同じ環境で作れる- CIでデプロイしたりFTPアップしたりが簡単にできる- 納品時のファイルがさくっと作れる- JSはなるべく細分化して使い回しをしていきたい- パフォーマンスは大事にしたいけど面倒くさいのはイヤ
©"2014"LIG"INC."@frontainer
ディレクトリ構成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/ <- スマートフォン用の開発ソース...(略
©"2014"LIG"INC."@frontainer
やってくれること- SASSのコンパイル- ベンダープレフィックスの自動付与- ファイルや画像の圧縮- LiveReload- スプライト画像とSCSSの作成- requireでスマートにJSを結合- EJSを使ったテンプレート- CSSの最適化- ソースマップの書き出し- ユニットテスト- HTML/JSのLint
©"2014"LIG"INC."@frontainer
使うとき$ npm i && bower i$ gulp build$ gulp
SCSSファイルとJS、EJSファイルの変更を監視して、%
変更があればpublic/pc/フォルダにファイルを書き出す
©"2014"LIG"INC."@frontainer
spディレクトリで開発するとき$ gulp -d=sp
!dオプションにディレクトリ名を指定すると#
app/ディレクトリ名を作業ディレクトリとして#ファイルの監視が行われる
©"2014"LIG"INC."@frontainer
JSやらCSSやらを圧縮して出すとき$ gulp build -min$ gulp build -d=sp -min
デプロイ時に実行するコマンド!
publicフォルダを一度クリアしてから圧縮したファイルを出力する
©"2014"LIG"INC."@frontainer
ディレクトリ
js/┣ common.js <- bowerでインストールした外部ライブラリ専用┣ app.js <- 手で書いたソースをまとめるファイル┣ modules/ <- 使い回しできるファイル群┗ util/ <- ユーティリティやPolyfillなどを入れる
©"2014"LIG"INC."@frontainer
modules/Hoge.js
function Hoge(){};Hoge.prototype = { init: function() { }}module.exports = Hoge;
©"2014"LIG"INC."@frontainer
app.js
var Hoge = require('./modules/Hoge');// ↑外部のJSを読み込み
var hoge = new Hoge();
©"2014"LIG"INC."@frontainer
保存すると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
©"2014"LIG"INC."@frontainer
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
©"2014"LIG"INC."@frontainer
- SASSのコンパイル- ベンダープレフィックスの自動付与- ファイルや画像の圧縮- LiveReload- スプライト画像とSCSSの作成- requireでスマートにJSを結合 <= ここの話- EJSを使ったテンプレート- CSSの最適化- ソースマップの書き出し- ユニットテスト- HTML/JSのLint©"2014"LIG"INC."@frontainer
frontplateで検索h"ps://github.com/frontainer/frontplate
©"2014"LIG"INC."@frontainer