Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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 .

Slide 3

Slide 3 text

Boilerplate Frameworks Testing Dependency management Version Control Deployment Performance optimization Docs Build Continuous Integration Abstractions Workflow

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

A S Y O U K N O W… “Time” is a key factor in staying productive.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

The average front-end workflow today S E T U P D E V E L O P B U I L D

Slide 8

Slide 8 text

S E T U P Scaffolding Download libraries Download templates Download frameworks

Slide 9

Slide 9 text

D E V E L O P Watch Sass / Less / Stylus Watch ES6 / CoffeeScript Watch HTML / Jade / Haml LiveReload JS / CSS Linting

Slide 10

Slide 10 text

B U I L D Code linting Running unit tests Compile everything Minify & concatenate Generate images / icons Optimize performance HTTP Server Deployment

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

B U I L D T O O L S

Slide 13

Slide 13 text

There are so many tools. Just choose what you wants.

Slide 14

Slide 14 text

B U I L D T O O L S

Slide 15

Slide 15 text

Webpack Gulp NPM

Slide 16

Slide 16 text

N O D E PA C K A G E S M A N A G E R

Slide 17

Slide 17 text

var path = require(‘path’); var gulp = require(‘gulp’); var webpack = require(‘webpack’);

Slide 18

Slide 18 text

I N S TA L L M O D U L E S $ npm install module-name $ npm install —save module-name

Slide 19

Slide 19 text

I N S TA L L M O D U L E S

Slide 20

Slide 20 text

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” } }

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

G U L P • A build system • A task runner • A workflow automator

Slide 23

Slide 23 text

W H Y G U L P ? • Smaller, more efficient plug-ins • Built-in file watching functionality • JavaScript Configuration files • Streams

Slide 24

Slide 24 text

I N S TA L L $ npm install -g gulp

Slide 25

Slide 25 text

G U L P F I L E . J S var gulp = require(‘gulp’); gulp.task(‘task-name’, function() { … }); gulp.task(‘default’, [‘task-name’]);

Slide 26

Slide 26 text

G U L P F I L E . J S $ gulp task-name

Slide 27

Slide 27 text

G U L P A P I gulp.task gulp.src gulp.dest gulp.watch

Slide 28

Slide 28 text

S O U R C E gulp.task(‘task-name’, function() { return gulp.src(‘./src/js/*.js’) .pipe(…); });

Slide 29

Slide 29 text

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’); });

Slide 30

Slide 30 text

D E S T I N AT I O N gulp.task(‘task-name’, function() { gulp.watch(‘./src/js/**’, [‘build-task’]); });

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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’); });

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Q U E S T I O N ?

Slide 35

Slide 35 text

M O D U L E B U N D L E R

Slide 36

Slide 36 text

Before we do that … There were something you remembered

Slide 37

Slide 37 text

Uncaught Referencer Error: jQuery is not defined.

Slide 38

Slide 38 text

WHAT?

Slide 39

Slide 39 text

Slide 40

Slide 40 text

<script src=“bootstrap.min.js” <script src=“angular-slick.js” <script src=“…” <script src=“…” <script src=“app.js”>

Slide 41

Slide 41 text

http://webpack.github.io/

Slide 42

Slide 42 text

B A S I C U S A G E

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

L O A D E R S preprocess files

Slide 46

Slide 46 text

P L U G I N S

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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()

Slide 49

Slide 49 text

W E B PA C K - D E V- S E R V E R

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Q U E S T I O N ?

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

T H A N K