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
97
Other Decks in Technology
See All in Technology
地図と生成AI
nakasho
0
680
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.1k
OpenTelemetry の Log を使いこなそう
biwashi
4
970
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
410
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
150
AI工学特論: MLOps・継続的評価
asei
10
1.5k
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
690
今日からあなたもGeminiを好きになる
subaruhello
1
550
20250719_JAWS_kobe
takuyay0ne
1
160
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Scaling GitHub
holman
461
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GitHub's CSS Performance
jonrohan
1031
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Faster Mobile Websites
deanohume
308
31k
Optimizing for Happiness
mojombo
379
70k
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