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
62
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
85
Other Decks in Technology
See All in Technology
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
380
AI JIMY - 登壇(インストール編)
hanacchi
0
150
Observabilityジャーニーを実現するためのAWSサービス:OSS編
o11yfes2023
0
110
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
100
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
0
120
拓展QA日常工作的邊界
line_developers_tw
PRO
0
460
Observabilityジャーニーを実現するためのAWSサービス:CloudWatch編
o11yfes2023
0
140
データ基盤を支える技術
chanyou0311
5
2.9k
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
510
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
130
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
710
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Become a Pro
speakerdeck
PRO
13
4.6k
Agile that works and the tools we love
rasmusluckow
325
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
Practical Orchestrator
shlominoach
183
9.8k
A Philosophy of Restraint
colly
197
16k
GitHub's CSS Performance
jonrohan
1025
450k
Scaling GitHub
holman
457
140k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
RailsConf 2023
tenderlove
9
580
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
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