Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-End workflows
Search
Cesar
October 03, 2015
Technology
0
76
Front-End workflows
Cesar
October 03, 2015
Tweet
Share
More Decks by Cesar
See All by Cesar
Webpack
cesar2535
1
450
CSS Layout w/ HTML5 & CSS3
cesar2535
2
94
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
OPENLOGI Company Profile for engineer
hr01
1
33k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
200
フィンテック養成勉強会#54
finengine
0
200
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
260
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
200
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
290
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
670
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
300
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
1
250
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Designing for humans not robots
tammielis
253
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Raft: Consensus for Rubyists
vanstee
140
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
F R O N T- E N D W O
R K F L O W S C E S A R C H E N
O u r t o o l s l a
n d s c a p e i s g e t t i n g m o re c o m p l e x .
Boilerplate Frameworks Testing Dependency management Version Control Deployment Performance optimization
Docs Build Continuous Integration Abstractions Workflow
None
A S Y O U K N O W… “Time”
is a key factor in staying productive.
None
The average front-end workflow today S E T U P
D E V E L O P B U I L D
S E T U P Scaffolding Download libraries Download templates
Download frameworks
D E V E L O P Watch Sass /
Less / Stylus Watch ES6 / CoffeeScript Watch HTML / Jade / Haml LiveReload JS / CSS Linting
B U I L D Code linting Running unit tests
Compile everything Minify & concatenate Generate images / icons Optimize performance HTTP Server Deployment
A U T O M A T E T H
I S W O R K F L O W F O R A L L T Y P E S O F P R O J E C T
B U I L D T O O L S
There are so many tools. Just choose what you wants.
B U I L D T O O L S
Webpack Gulp NPM
N O D E PA C K A G E
S M A N A G E R
var path = require(‘path’); var gulp = require(‘gulp’); var webpack
= require(‘webpack’);
I N S TA L L M O D U
L E S $ npm install module-name $ npm install —save module-name
I N S TA L L M O D U
L E S
PA C K A G E . J S O
N { “name”: “project-name”, “version”: “0.0.0”, “dependencies: { “gulp”: “^3.9.0”, “webpack”: “^1.11.0” } }
None
G U L P • A build system • A
task runner • A workflow automator
W H Y G U L P ? • Smaller,
more efficient plug-ins • Built-in file watching functionality • JavaScript Configuration files • Streams
I N S TA L L $ npm install -g
gulp
G U L P F I L E . J
S var gulp = require(‘gulp’); gulp.task(‘task-name’, function() { … }); gulp.task(‘default’, [‘task-name’]);
G U L P F I L E . J
S $ gulp task-name
G U L P A P I gulp.task gulp.src gulp.dest
gulp.watch
S O U R C E gulp.task(‘task-name’, function() { return
gulp.src(‘./src/js/*.js’) .pipe(…); });
D E S T I N AT I O N
gulp.task(‘task-name’, function() { return gulp.src(‘./src/js/*.js’) .pipe(…) .pipe(gulp.dest(‘./build’); });
D E S T I N AT I O N
gulp.task(‘task-name’, function() { gulp.watch(‘./src/js/**’, [‘build-task’]); });
U S E F U L P L U G
I N S F O R G U L P gulp-concat gulp-uglify gulp-rename gulp-util browser-sync
P L U G I N S var concat =
require(‘gulp-concat’); var rename = require(‘gulp-rename’); gulp.task(‘task-name’, function() { return gulp.src(‘./src/js/*.js’) .pipe(concat(‘app.js’)) .pipe(rename({ suffix: ‘.min’} .pipe(gulp.dest(‘./build’); });
None
Q U E S T I O N ?
M O D U L E B U N D
L E R
Before we do that … There were something you remembered
<script src=“app.js”></script> <script src=“jquery.min.js></script> Uncaught Referencer Error: jQuery is not
defined.
WHAT?
<script src=“jquery.min.js></script> <script src=“app.js”></script>
<script src=“jquery.min.js></script> <script src=“angular.min.js”</script> <script src=“bootstrap.min.js”</script> <script src=“slick.min.js”</script> <script src=“angular-slick.js”</script>
<script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“app.js”></script>
http://webpack.github.io/
B A S I C U S A G E
C O N F I G U R AT I
O N C L I & w e b p a c k . c o n f i g . j s
None
L O A D E R S preprocess files
P L U G I N S
H O T M O D U L E R
E P L A C E M E N T http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
H O T M O D U L E R
E P L A C E M E N T Entry webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server Plugins new webpack.HotModuleReplacementPlugin()
W E B PA C K - D E V-
S E R V E R
None
Q U E S T I O N ?
M O R E … • NPM • https://www.npmjs.com/ •
Gulp • http://gulpjs.com/ • https://scotch.io/tutorials/automate-your-tasks-easily-with- gulp-js • http://leveluptuts.com/tutorials/learning-gulp • Webpack • https://webpack.github.io/ • https://github.com/petehunt/webpack-howto
T H A N K