-
Notifications
You must be signed in to change notification settings - Fork 11
1.x build deploy
Beezでは、ビルドとデプロイが可能です。
このページで例にしているプロジェクトはbeez-projectによって生成されたプロジェクトです
ビルドではGrunt.jsを利用します。
$ grunt buildすることで以下を順次実行します。
$ tree -I node_modules
.
├── Gruntfile.js
├── build.local.js
├── conf
│ ├── local
│ │ ├── develop.json
│ │ └── release.json
│ ├── local.json
│ └── mockdata
│ ├── index.json
│ └── now.json
├── package.json
├── s
│ ├── core
│ │ ├── i18n
│ │ │ ├── en.js
│ │ │ └── ja.js
│ │ └── index.js
│ ├── index
│ │ ├── hbs
│ │ │ └── info.hbs
│ │ ├── index.html.hbs
│ │ ├── index.js
│ │ ├── model
│ │ │ └── index.js
│ │ ├── require.beez.js.hbs
│ │ ├── styl
│ │ │ ├── _sprite-logo-1.png
│ │ │ ├── _sprite-logo-2.jpg
│ │ │ ├── _sprite-logo-3.png
│ │ │ ├── index.styl
│ │ │ └── info.styl
│ │ └── view
│ │ ├── index.js
│ │ └── info.js
│ └── todos
│ ├── collection
│ │ └── todos.js
│ ├── hbs
│ │ ├── footer.hbs
│ │ ├── header.hbs
│ │ ├── main.hbs
│ │ └── todo.hbs
│ ├── i18n
│ │ ├── en.js
│ │ └── ja.js
│ ├── index.js
│ ├── model
│ │ └── todo.js
│ ├── styl
│ │ ├── footer.styl
│ │ ├── header.styl
│ │ └── main.styl
│ └── view
│ ├── footer.js
│ ├── header.js
│ ├── main.js
│ └── todo.js
└── vendor
├── backbone-min.js
├── backbone.js
├── backbone.localStorage-min.js
├── backbone.localStorage.js
├── beez.js
├── beez.min.js
├── handlebars.runtime.js
├── handlebars.runtime.min.js
├── require.js
├── require.min.js
├── underscore-min.js
├── underscore.js
├── zepto.js
└── zepto.min.js
19 directories, 53 files$ tree -I node_modules
.
├── Gruntfile.js
├── build.local.js
├── conf
│ ├── local
│ │ ├── develop.json
│ │ └── release.json
│ ├── local.json
│ └── mockdata
│ ├── index.json
│ └── now.json
├── dist
│ ├── build.txt
│ ├── core
│ │ ├── i18n
│ │ │ ├── en.js
│ │ │ └── ja.js
│ │ └── index.js
│ ├── index
│ │ ├── hbs
│ │ │ ├── info.hbs
│ │ │ └── info.hbsc.js
│ │ ├── index.html.hbs
│ │ ├── index.js
│ │ ├── local.develop.html
│ │ ├── local.release.html
│ │ ├── model
│ │ │ └── index.js
│ │ ├── require.beez.js.hbs
│ │ ├── require.beez.local.develop.js
│ │ ├── require.beez.local.release.js
│ │ ├── styl
│ │ │ ├── _sprite-logo-1.png
│ │ │ ├── _sprite-logo-2.jpg
│ │ │ ├── _sprite-logo-3.png
│ │ │ ├── _sprite-logo.styl
│ │ │ ├── index.css
│ │ │ ├── index.styl
│ │ │ ├── info.css
│ │ │ ├── info.styl
│ │ │ ├── sprite-logo@10x.png
│ │ │ ├── sprite-logo@13x.png
│ │ │ ├── sprite-logo@15x.png
│ │ │ └── sprite-logo@20x.png
│ │ └── view
│ │ ├── index.js
│ │ └── info.js
│ └── todos
│ ├── collection
│ │ └── todos.js
│ ├── hbs
│ │ ├── footer.hbs
│ │ ├── footer.hbsc.js
│ │ ├── header.hbs
│ │ ├── header.hbsc.js
│ │ ├── main.hbs
│ │ ├── main.hbsc.js
│ │ ├── todo.hbs
│ │ └── todo.hbsc.js
│ ├── i18n
│ │ ├── en.js
│ │ └── ja.js
│ ├── index.js
│ ├── model
│ │ └── todo.js
│ ├── styl
│ │ ├── footer.css
│ │ ├── footer.styl
│ │ ├── header.css
│ │ ├── header.styl
│ │ ├── main.css
│ │ └── main.styl
│ └── view
│ ├── footer.js
│ ├── header.js
│ ├── main.js
│ └── todo.js
├── package.json
├── s
│ ├── core
│ │ ├── i18n
│ │ │ ├── en.js
│ │ │ └── ja.js
│ │ └── index.js
│ ├── index
│ │ ├── hbs
│ │ │ ├── info.hbs
│ │ │ └── info.hbsc.js
│ │ ├── index.html.hbs
│ │ ├── index.js
│ │ ├── local.develop.html
│ │ ├── local.release.html
│ │ ├── model
│ │ │ └── index.js
│ │ ├── require.beez.js.hbs
│ │ ├── require.beez.local.develop.js
│ │ ├── require.beez.local.release.js
│ │ ├── styl
│ │ │ ├── _sprite-logo-1.png
│ │ │ ├── _sprite-logo-2.jpg
│ │ │ ├── _sprite-logo-3.png
│ │ │ ├── _sprite-logo.styl
│ │ │ ├── index.css
│ │ │ ├── index.styl
│ │ │ ├── info.css
│ │ │ ├── info.styl
│ │ │ ├── sprite-logo@10x.png
│ │ │ ├── sprite-logo@13x.png
│ │ │ ├── sprite-logo@15x.png
│ │ │ └── sprite-logo@20x.png
│ │ └── view
│ │ ├── index.js
│ │ └── info.js
│ └── todos
│ ├── collection
│ │ └── todos.js
│ ├── hbs
│ │ ├── footer.hbs
│ │ ├── footer.hbsc.js
│ │ ├── header.hbs
│ │ ├── header.hbsc.js
│ │ ├── main.hbs
│ │ ├── main.hbsc.js
│ │ ├── todo.hbs
│ │ └── todo.hbsc.js
│ ├── i18n
│ │ ├── en.js
│ │ └── ja.js
│ ├── index.js
│ ├── model
│ │ └── todo.js
│ ├── styl
│ │ ├── footer.css
│ │ ├── footer.styl
│ │ ├── header.css
│ │ ├── header.styl
│ │ ├── main.css
│ │ └── main.styl
│ └── view
│ ├── footer.js
│ ├── header.js
│ ├── main.js
│ └── todo.js
└── vendor
├── backbone-min.js
├── backbone.js
├── backbone.localStorage-min.js
├── backbone.localStorage.js
├── beez.js
├── beez.min.js
├── handlebars.runtime.js
├── handlebars.runtime.min.js
├── require.js
├── require.min.js
├── underscore-min.js
├── underscore.js
├── zepto.js
└── zepto.min.js
34 directories, 123 filesjshintのチェックを行います。プロジェクトのホームディレクトリ直下にある.jshintrcと.jshintignoreを使用します。
$ grunt jshint
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "jshint:src" (jshint) task
>> 18 files lint free.
Done, without errors.詳しくはgrunt-contrib-jshintを御覧ください。
sprite用画像ファイルからspritesheetの画像ファイルとstylusファイルを生成します。デフォルトの設定ではsprite-[group]-[key].pngファイルを用意しておくと同一ディレクトリにsprite-[group].stylと設定されたratio分のsprite-[group]@[ratio*10]x.pngファイルが生成されます。
{
"sprite": {
"options": {
"ratios": [ 1, 1.3, 1.5, 2 ], // 生成するsprite sheetのratio
"extnames": [ ".png", ".jpg" ], // sprite sheetのpartsとなる画像の対象拡張子
"heads": [ "sprite", "_sprite" ], // sprite sheetのpartsとなる画像のファイル名の先頭
"separator": "-" // ファイル名のheadやratioの接続文字
}
}
}
以下
sprite-[group]-[key].pngのspriteを先頭詞、-を接続詞、[group]をグループ名、[key]をパーツ名と呼ぶ
- ratios
ここで指定したratio分のスプライトシートを生成する。上記のような設定の場合、
sprite-[group]@10x.png, sprite-[group]@13x.png, sprite-[group]@15x.png, sprite-[group]@20x.pngのように生成されます。 - extnames スプライトシートのパーツとなる画像の対象拡張子です。
- heads
スプライトシートのパーツとなる画像のファイル名の先頭詞です。グループ名が同じでも先頭詞が違う場合は違うスプライトシートとしてみなされます。
sprite-apple-red.png, sprite-apple-blue.jpg, _sprite-apple-green.png, _sprite-apple-yellow.jpgが同一ディレクトリにあった時、sprite-apple.styl, _sprite-apple.stylが生成され、前者にはredとblue、後者にはgreenとyellowが入ります。 - separator 先頭詞、グループ名、パーツ名を繋ぐ接続詞です。
$ grunt exec:beez_csssprite
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "exec:beez_csssprite" (exec) task
--------------------------------------------------------------
Building '1x' at pixel ratio 1
--------------------------------------------------------------
Creating a sprite from following images:
s/index/styl/_sprite-logo-1.png (100x100 - derived from 2x)
s/index/styl/_sprite-logo-2.jpg (100x100 - derived from 2x)
s/index/styl/_sprite-logo-3.png (100x100 - derived from 2x)
Output files: s/index/styl/sprite-logo@10x.png
Output size: 200x200
Writing images to sprite sheet...
Composing s/index/styl/_sprite-logo-1.png
Composing s/index/styl/_sprite-logo-2.jpg
Composing s/index/styl/_sprite-logo-3.png
--------------------------------------------------------------
Building '1.3x' at pixel ratio 1.3
--------------------------------------------------------------
Creating a sprite from following images:
s/index/styl/_sprite-logo-1.png (130x130 - derived from 2x)
s/index/styl/_sprite-logo-2.jpg (130x130 - derived from 2x)
s/index/styl/_sprite-logo-3.png (130x130 - derived from 2x)
Output files: s/index/styl/sprite-logo@13x.png
Output size: 260x260
Writing images to sprite sheet...
Composing s/index/styl/_sprite-logo-1.png
Composing s/index/styl/_sprite-logo-2.jpg
Composing s/index/styl/_sprite-logo-3.png
--------------------------------------------------------------
Building '1.5x' at pixel ratio 1.5
--------------------------------------------------------------
Creating a sprite from following images:
s/index/styl/_sprite-logo-1.png (150x150 - derived from 2x)
s/index/styl/_sprite-logo-2.jpg (150x150 - derived from 2x)
s/index/styl/_sprite-logo-3.png (150x150 - derived from 2x)
Output files: s/index/styl/sprite-logo@15x.png
Output size: 300x300
Writing images to sprite sheet...
Composing s/index/styl/_sprite-logo-1.png
Composing s/index/styl/_sprite-logo-2.jpg
Composing s/index/styl/_sprite-logo-3.png
--------------------------------------------------------------
Building '2x' at pixel ratio 2
--------------------------------------------------------------
Creating a sprite from following images:
s/index/styl/_sprite-logo-1.png (200x200)
s/index/styl/_sprite-logo-2.jpg (200x200)
s/index/styl/_sprite-logo-3.png (200x200)
Output files: s/index/styl/sprite-logo@20x.png
Output size: 400x400
Writing images to sprite sheet...
Composing s/index/styl/_sprite-logo-1.png
Composing s/index/styl/_sprite-logo-2.jpg
Composing s/index/styl/_sprite-logo-3.png
CSS file written to s/index/styl/_sprite-logo.styl
sprite build
Base Directory: s
finished.
Done, without errors.詳しくはbeez-cssspriteを御覧ください。
stylusファイルをcssファイルにコンパイルします。stylusファイルに関しましてはstylusを御覧ください。.stylファイルを用意しておくと同一ディレクトリに.cssを生成します。ただしファイル名の先頭に_が付いていないものに限ります。_example.styl等のファイルはコンパイルされません。
$ grunt exec:beez_stylus2css
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "exec:beez_stylus2css" (exec) task
Stylus Compile
Base Directory: s
comiled css file:
s/index/styl/index.css
s/index/styl/info.css
s/todos/styl/footer.css
s/todos/styl/header.css
s/todos/styl/main.css
copied css file:
---> Good luck to you :)
Done, without errors.詳しくはbeez-stylus2cssを御覧ください。
hbsファイルをjsファイルにコンパイルします。hbsファイルに関しましてはhandlebarsを御覧ください。*.hbsを用意しておくと同一ディレクトリに*.hbsc.jsを生成します。configで設定したhbsファイルを[env].[key].htmlやrequire.beez.[env][key].jsとして生成します。
{
"bootstrap": {
"html": [ "*/index/index.html.hbs" ], // "[env].[key].html" files match the pattern
"datamain": [ "*/index/require.beez.js.hbs", "*/tutorial/require.beez.js.hbs" ] // "require.beez.[env][key].js" files match the pattern
}
}
- html
[env].[key].htmlファイルの元となるhbsファイルを指定します。ワイルドカードを使用できます。後方完全一致です。 - datamain
require.beez.[env].[key].jsファイルの元となるhbsファイルを指定します。ワイルドカードを使用できます。後方完全一致です。
$ grunt exec:beez_hbs2hbsc
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "exec:beez_hbs2hbsc" (exec) task
hbs/hbsp Compile
Base Directory: s
comile hbsc.js/hbsp.js file:
s/index/hbs/info.hbsc.js
s/index/local.develop.html
s/index/local.release.html
s/index/require.beez.local.develop.js
s/index/require.beez.local.release.js
s/todos/hbs/footer.hbsc.js
s/todos/hbs/header.hbsc.js
s/todos/hbs/main.hbsc.js
s/todos/hbs/todo.hbsc.js
finished.
Done, without errors.詳しくはbeez-hbs2hbscを御覧ください。
requirejsの提供しているr.jsを使用して./sディレクトリ下のファイルを./distディレクトリにコピーしつつ、jsファイルはoptimizeします。r.jsに関しましてはr.jsを御覧ください。optimizeするときはプロジェクトのホームディレクトリ直下にあるbuild.[env].jsをr.jsの設定ファイルとして使用します。
$ grunt exec:beez_rjs
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "exec:beez_rjs" (exec) task
index/styl/index.css
----------------
index/styl/index.css
index/styl/info.css
----------------
index/styl/info.css
todos/styl/footer.css
----------------
todos/styl/footer.css
todos/styl/header.css
----------------
todos/styl/header.css
todos/styl/main.css
----------------
todos/styl/main.css
core/index.js
----------------
core/i18n/en.js
core/i18n/ja.js
core/index.js
index/index.js
----------------
index/view/index.js
index/Model/index.js
core/i18n/en.js
core/i18n/ja.js
core/index.js
index/hbs/info.hbsc.js
index/view/info.js
index/index.js
todos/index.js
----------------
todos/i18n/en.js
todos/i18n/ja.js
todos/model/todo.js
todos/hbs/header.hbsc.js
todos/view/header.js
todos/hbs/main.hbsc.js
todos/collection/todos.js
todos/hbs/todo.hbsc.js
todos/view/todo.js
todos/view/main.js
todos/hbs/footer.hbsc.js
todos/view/footer.js
todos/index.js
Done, without errors.詳しくはrequirejsを御覧ください。
.jshintrc //jshintで使用
.jshintignore //jshintで使用
conf/[env].json //beez-csssprite, beez-stylus2css, beez-hbs2hbscで使用
build.[env].js //requirejsで使用
デプロイではGrunt.jsを利用します。
$ grunt deployすることで以下を順次実行します。
$ tree release
release
└── local
├── core
│ └── index.js
├── index
│ ├── index.js
│ ├── local.develop.html
│ ├── local.release.html
│ ├── require.beez.local.develop.js
│ ├── require.beez.local.release.js
│ └── styl
│ ├── index.css
│ ├── info.css
│ ├── sprite-logo@10x.png
│ ├── sprite-logo@13x.png
│ ├── sprite-logo@15x.png
│ └── sprite-logo@20x.png
├── todos
│ ├── index.js
│ └── styl
│ ├── footer.css
│ ├── header.css
│ └── main.css
└── vendor
├── backbone-min.js
├── backbone.js
├── backbone.localStorage-min.js
├── backbone.localStorage.js
├── beez.js
├── beez.min.js
├── handlebars.runtime.js
├── handlebars.runtime.min.js
├── require.js
├── require.min.js
├── underscore-min.js
├── underscore.js
├── zepto.js
└── zepto.min.js
7 directories, 30 files設定ファイル(./conf/[env].json)で指定されたターゲットを./release/[env]ディレクトリにデプロイします。その際、設定で指定することにより画像のoptimizeがされます。
(optipng と jpegoptim pngquant に対応しております)
{
"deploy": {
"optipng": {
"use": true,
"options": "-o 2"
},
"jpegoptim": {
"use": true,
"options": "--strip-all"
},
"pngquant": {
"use": false,
"options": "--ext .png -f -v"
},
"include": [ "dist/*/index.js", "dist/index/require.beez.*.js", "*.html", "*.css", "*.png", "*.jpg", "*.gif", "*.ttf", "*.eot", "*.woff" ], // deployするファイル
"exclude": [ "_*.css", "_*.png", "_*.jpg", "_*.gif", "_*.ttf", "_*.eot", "_*.woff" ] // deployしないファイル
}
}
- optiong
use: trueにすることでpngファイルをoptipngを用いてoptimizeします。 - jpegoptim
use: trueにすることでjpegファイルをjpegoptimを用いてoptimizeします。 - pngquant
use: trueにすることでjpegファイルをpngquantを用いてoptimizeします。 - include deployするファイルを記述します。ワイルドカードが使用できます。後方完全一致です。
- exclude deployしないファイルを記述します。includeより優先されます。ワイルドカードが使用できます。後方完全一致です。
ワイルドカードはファイルのみ適応されます。ディレクトリを超えてマッチすることはありません。
$ grunt exec:beez_deploy
>> [environment] project name: example
>> [environment] project directory: /private/tmp/example
>> [options] env: local
Running "exec:beez_deploy" (exec) task
Source Directory: dist
Output Directory: release/local
deploy regexp: /(dist/[^\/]*/index\.js|dist/index/require\.beez\.[^\/]*\.js|[^\/]*\.html|[^\/]*\.css|[^\/]*\.png|[^\/]*\.jpg|[^\/]*\.gif|[^\/]*\.ttf|[^\/]*\.eot|[^\/]*\.woff)$/
do not deploy regexp: /(_[^\/]*\.css|_[^\/]*\.png|_[^\/]*\.jpg|_[^\/]*\.gif|_[^\/]*\.ttf|_[^\/]*\.eot|_[^\/]*\.woff)$/
extend regexp: unused
deploy: release/local/core/index.js
deploy: release/local/index/index.js
deploy: release/local/index/local.develop.html
deploy: release/local/index/local.release.html
deploy: release/local/index/require.beez.local.develop.js
deploy: release/local/index/require.beez.local.release.js
deploy: release/local/index/styl/index.css
deploy: release/local/index/styl/info.css
deploy: release/local/index/styl/sprite-logo@10x.png
** Processing: release/local/index/styl/sprite-logo@10x.png
200x200 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 7459 bytes
Input file size = 7705 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0
IDAT size = 6471
zc = 9 zm = 8 zs = 1 f = 0
zc = 1 zm = 8 zs = 2 f = 0
zc = 9 zm = 8 zs = 3 f = 0
zc = 9 zm = 8 zs = 0 f = 5
zc = 9 zm = 8 zs = 1 f = 5
zc = 1 zm = 8 zs = 2 f = 5
zc = 9 zm = 8 zs = 3 f = 5
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 6471
Output IDAT size = 6471 bytes (988 bytes decrease)
Output file size = 6717 bytes (988 bytes = 12.82% decrease)
optipng: release/local/index/styl/sprite-logo@10x.png
deploy: release/local/index/styl/sprite-logo@13x.png
** Processing: release/local/index/styl/sprite-logo@13x.png
260x260 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 9762 bytes
Input file size = 10008 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0
IDAT size = 8296
zc = 9 zm = 8 zs = 1 f = 0
zc = 1 zm = 8 zs = 2 f = 0
zc = 9 zm = 8 zs = 3 f = 0
zc = 9 zm = 8 zs = 0 f = 5
zc = 9 zm = 8 zs = 1 f = 5
zc = 1 zm = 8 zs = 2 f = 5
zc = 9 zm = 8 zs = 3 f = 5
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 8296
Output IDAT size = 8296 bytes (1466 bytes decrease)
Output file size = 8542 bytes (1466 bytes = 14.65% decrease)
optipng: release/local/index/styl/sprite-logo@13x.png
deploy: release/local/index/styl/sprite-logo@15x.png
** Processing: release/local/index/styl/sprite-logo@15x.png
300x300 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 11990 bytes
Input file size = 12236 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0
IDAT size = 9998
zc = 9 zm = 8 zs = 1 f = 0
zc = 1 zm = 8 zs = 2 f = 0
zc = 9 zm = 8 zs = 3 f = 0
zc = 9 zm = 8 zs = 0 f = 5
zc = 9 zm = 8 zs = 1 f = 5
zc = 1 zm = 8 zs = 2 f = 5
zc = 9 zm = 8 zs = 3 f = 5
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 9998
Output IDAT size = 9998 bytes (1992 bytes decrease)
Output file size = 10244 bytes (1992 bytes = 16.28% decrease)
optipng: release/local/index/styl/sprite-logo@15x.png
deploy: release/local/index/styl/sprite-logo@20x.png
** Processing: release/local/index/styl/sprite-logo@20x.png
400x400 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 12670 bytes
Input file size = 12916 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0
IDAT size = 10006
zc = 9 zm = 8 zs = 1 f = 0
zc = 1 zm = 8 zs = 2 f = 0
zc = 9 zm = 8 zs = 3 f = 0
zc = 9 zm = 8 zs = 0 f = 5
zc = 9 zm = 8 zs = 1 f = 5
zc = 1 zm = 8 zs = 2 f = 5
zc = 9 zm = 8 zs = 3 f = 5
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 10006
Output IDAT size = 10006 bytes (2664 bytes decrease)
Output file size = 10252 bytes (2664 bytes = 20.63% decrease)
optipng: release/local/index/styl/sprite-logo@20x.png
deploy: release/local/todos/index.js
deploy: release/local/todos/styl/footer.css
deploy: release/local/todos/styl/header.css
deploy: release/local/todos/styl/main.css
finished.
Done, without errors.詳しくはbeez-deployを御覧ください。
設定ファイル(./conf/[env].json)で指定されたターゲットを./release/[env]ディレクトリから取り除きます。
includeとexcludeの書き方はbeez-deployと同じです。
$ grunt exec:beez_ignore
>> [environment] project name: test
>> [environment] project directory: /private/tmp/test
>> [options] env: local
Running "exec:beez_ignore" (exec) task
Base Directory: release/local
remove regexp: /(:)/
do not remove regexp: /(:)/
extend regexp: unused
finished.
Done, without errors.詳しくはbeez-ignoreを御覧ください
./venderディレクトリ内のファイルを./release/[env]/にコピーします。
$ grunt copy:vendor
>> [environment] project name: test
>> [environment] project directory: /private/tmp/test
>> [options] env: local
Running "copy:vendor" (copy) task
Created 1 directories, copied 14 files
Done, without errors. conf/[env].json //beez-deploy, beez-ignoreで使用