Front-End workflows

Transcript

1. 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
2. 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 .
3. Boilerplate Frameworks Testing Dependency management Version Control Deployment Performance optimization Docs Build Continuous Integration Abstractions Workflow
5. A S Y O U K N O W… “Time” is a key factor in staying productive.
7. The average front-end workflow today S E T U P D E V E L O P B U I L D
8. S E T U P Scaffolding Download libraries Download templates Download frameworks
9. D E V E L O P Watch Sass / Less / Stylus Watch ES6 / CoffeeScript Watch HTML / Jade / Haml LiveReload JS / CSS Linting
10. B U I L D Code linting Running unit tests Compile everything Minify & concatenate Generate images / icons Optimize performance HTTP Server Deployment
11. 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
12. B U I L D T O O L S
13. There are so many tools. Just choose what you wants.
14. B U I L D T O O L S
15. Webpack Gulp NPM
16. N O D E PA C K A G E S M A N A G E R
17. var path = require(‘path’); var gulp = require(‘gulp’); var webpack = require(‘webpack’);
18. I N S TA L L M O D U L E S $ npm install module-name $ npm install —save module-name
19. I N S TA L L M O D U L E S
20. 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” } }
22. G U L P • A build system • A task runner • A workflow automator
23. W H Y G U L P ? • Smaller, more efficient plug-ins • Built-in file watching functionality • JavaScript Configuration files • Streams
24. I N S TA L L $ npm install -g gulp
25. G U L P F I L E . J S var gulp = require(‘gulp’); gulp.task(‘task-name’, function() { … }); gulp.task(‘default’, [‘task-name’]);
26. G U L P F I L E . J S $ gulp task-name
27. G U L P A P I gulp.task gulp.src gulp.dest gulp.watch
28. S O U R C E gulp.task(‘task-name’, function() { return gulp.src(‘./src/js/*.js’) .pipe(…); });
29. 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’); });
30. D E S T I N AT I O N gulp.task(‘task-name’, function() { gulp.watch(‘./src/js/**’, [‘build-task’]); });
31. 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
32. 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’); });
34. Q U E S T I O N ?
35. M O D U L E B U N D L E R
36. Before we do that … There were something you remembered
37. <script src=“app.js”></script> <script src=“jquery.min.js></script> Uncaught Referencer Error: jQuery is not defined.
38. WHAT?
39. <script src=“jquery.min.js></script> <script src=“app.js”></script>
40. <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>
41. http://webpack.github.io/
42. B A S I C U S A G E
43. 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
45. L O A D E R S preprocess files
46. P L U G I N S
47. 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
48. 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()
49. W E B PA C K - D E V- S E R V E R
51. Q U E S T I O N ?
52. 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
53. T H A N K