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
70
Front-End workflows
Cesar
October 03, 2015
Tweet
Share
More Decks by Cesar
See All by Cesar
Webpack
cesar2535
1
440
CSS Layout w/ HTML5 & CSS3
cesar2535
2
92
Other Decks in Technology
See All in Technology
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
400
OPENLOGI Company Profile
hr01
0
60k
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
MIMEと文字コードの闇
hirachan
2
1.4k
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
110
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
340
手を動かしてレベルアップしよう!
maruto
0
230
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Scaling GitHub
holman
459
140k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How STYLIGHT went responsive
nonsquared
98
5.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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