Download as PDF, PPTX
![gulpfile.coffee
gulp.task('concat', function() {
gulp.src([
'modules/tab/tab.js'
'modules/aaa/aaa.js'
'modules/bbb/bbb.js'
'modules/bbb/bbbView.js'
])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});](https://image.slidesharecdn.com/random-141125060247-conversion-gate01/75/slide-23-2048.jpg)
![コメントアウト
gulpfile.coffee
gulp.task('concat', function() {
gulp.src([
'modules/tab/tab.js'
'modules/aaa/aaa.js'
# 'modules/bbb/bbb.js'
# 'modules/bbb/bbbView.js'
])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});](https://image.slidesharecdn.com/random-141125060247-conversion-gate01/75/slide-26-2048.jpg)
More Related Content
小規模案件で作られた秘伝のタレ
- 1.
- 2. 自己紹介 me = "なまえ": "むゆう" "ツイッター": "@anticyborg" "所属": "フリーランス" "職種": "フロントエンドエンジニア"
- 3. 主な仕事 • 小規模のWebページ制作 • 複数案件平行で走る • 0から作って納品なタイプも多い
- 4. よく思うこと • 制作期間が短い案件が多い • htmlもcssもjsも同じような記述が多い • JSでのUI実装は大体自作のものになる • ライブラリの解析・カスタムにかける時間で作れる
- 5. テンプレート化 汎用名ものはできるだけテンプレート化 •汎用な記述 • ディレクトリ構成 • ビルドタスク
- 6. 日付と1行概要のテキスト .recentDateList ul.recentDateList__list li.recentDateList__item .recentDateList__.date 2014/01/01 .recentDateList__.desc 新着情報テキスト li.recentDateList__item .recentDateList__.date 2014/01/01 .recentDateList__.desc 新着情報テキスト
- 7. 日付と1行概要のテキスト .recentDateList &__list margin: 10px &__item overflow: hidden &__date float: left width: 100px &__desc overflow: hidden
- 8. タブ .tabWrap .tab .tab__list a.tab__item(href="#ct1") タブテキスト .tab__list a.tab__item(href="#ct2") タブテキスト .tabContent .tabContent__item タブの中身 .tabContent__item タブの中身
- 9. タブ .tab &__list float: left &__item display: block .tabContent &__item display: block &:is-hide display: none
- 10. タブ app.Tab =(ele, tab, content) -> self = @ @ele = $(ele) @hide = -> @ele.find(content).addClass "is-hide" @show = (that) -> id = $(that).attr 'href' @ele.find(id).removeClass "is-hide" @ele.on "click", tab, -> self.hide() self.show @ this
- 11.
- 12. BEMで叶うこと • モジュール単位のcss • 衝突しないcss • 拡張しやすいcss
- 13.
- 14. モジュール • パーツのひとまとまりをモジュールとして考え、ファイルを 分割していく • 作ったモジュールを分かりやすく、使い回しやすいように配 置する
- 15. モジュールを意識した構成 app └src/ └ jade/ └ sass/ └ module/ _recentDateList.sass _tab.sass style.sass └ coffee/ └ tab/ tab.coffee app.coffee
- 16. よりモジュールを意識した構成 src/ └sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass └ tab/ _tab.sass tab.coffee
- 17. テンプレート的なhtml入れたり src/ └sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass _recentDateList.jade └ tab/ _tab.jade _tab.sass tab.coffee
- 18.
- 19.
- 20.
- 21. sassは style.sass に記述 style.sass @import "layout/header" @import "layout/footer" @import "../modules/recentDateList/recentDateList" @import "../modules/tab/tab"
- 22.
- 23. gulpfile.coffee gulp.task('concat', function(){ gulp.src([ 'modules/tab/tab.js' 'modules/aaa/aaa.js' 'modules/bbb/bbb.js' 'modules/bbb/bbbView.js' ]) .pipe(concat('all.js')) .pipe(gulp.dest('./dist/')) });
- 24.
- 25. コメントアウト style.sass @import"layout/header" @import "layout/footer" @import "../modules/recentDateList/recentDateList" // @import "../modules/tab/tab"
- 26. コメントアウト gulpfile.coffee gulp.task('concat',function() { gulp.src([ 'modules/tab/tab.js' 'modules/aaa/aaa.js' # 'modules/bbb/bbb.js' # 'modules/bbb/bbbView.js' ]) .pipe(concat('all.js')) .pipe(gulp.dest('./dist/')) });
- 27.
- 28.
- 29. 何故こんな面倒なことをやるのか • WebComponentの襲来に備える • 世界が Web Component を認めなくても問題ない • モジュール単位で作れば組み合わせも可能
- 30.