Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Forget Grunt and Gulp! Webpack and NPM rule them all!

802 views

Published on

This talk shows why and how you should use Webpack and NPM scripts to replace complex Grunt and Gulp configurations and simplify application builds.

Published in: Technology
  • Be the first to comment

Forget Grunt and Gulp! Webpack and NPM rule them all!

  1. 1. Forget Grunt & Gulp Webpack & NPM tasks rule them all!
  2. 2. Who? • Derek Stavis
  3. 3. Who? • Derek Stavis • Coding stuff since 2000
  4. 4. Who? • Derek Stavis • Coding stuff since 2000 • High level stuff
  5. 5. Who? • Derek Stavis • Coding stuff since 2000 • High level stuff • Low level stuff
  6. 6. Who? • Derek Stavis • Coding stuff since 2000 • High level stuff • Low level stuff • Design stuff
  7. 7. Who? • Derek Stavis • Coding stuff since 2000 • High level stuff • Low level stuff • Design stuff • github.com/derekstavis
  8. 8. Who? • Derek Stavis • Coding stuff since 2000 • High level stuff • Low level stuff • Design stuff • github.com/derekstavis • github.com/oh-my-fish
  9. 9. But before you ask
  10. 10. Gulp Configura:on File var app, base, concat, directory, gulp, hostname, path, refresh, sass, uglify, del, connect, autoprefixer, babel; var autoPrefixBrowserList = ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']; gulp = require('gulp'); gutil = require('gulp-util'); concat = require('gulp-concat'); uglify = require('gulp-uglify'); sass = require('gulp-sass'); connect = require('gulp-connect'); del = require('del'); autoprefixer = require('gulp-autoprefixer'); babel = require('gulp-babel'); gulp.task('connect', function() { connect.server({ root: 'app', livereload: true }); }); gulp.task('images-deploy', function() { gulp.src(['app/images/**/*']) .pipe(gulp.dest('dist/images')); }); gulp.task('scripts', function() { //this is where our dev JS scripts are return gulp.src('app/scripts/src/**/*.js') .pipe(babel({ presets: ['es2015', 'react'] }) .pipe(concat('app.js')) .on('error', gutil.log) .pipe(uglify()) .pipe(gulp.dest('app/scripts')) .pipe(connect.reload()); }); gulp.task('scripts-deploy', function() { return gulp.src('app/scripts/src/**/ *.js') .pipe(concat('app.js')) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')); }); gulp.task('styles', function() { return gulp.src('app/styles/scss/ init.scss') .pipe(sass({ errLogToConsole: true, includePaths: [ 'app/styles/scss/' ] })) .pipe(autoprefixer({ browsers: autoPrefixBrowserList, cascade: true })) .on('error', gutil.log) .pipe(concat('styles.css')) .pipe(gulp.dest('app/styles')) .pipe(connect.reload()); }); gulp.task('styles-deploy', function() { return gulp.src('app/styles/scss/ init.scss') .pipe(sass({ includePaths: [ 'app/styles/scss', ] })) .pipe(autoprefixer({ browsers: autoPrefixBrowserList, cascade: true })) .pipe(concat('styles.css')) .pipe(gulp.dest('dist/styles')); }); gulp.task('html', function() { return gulp.src('app/*.html') .pipe(connect.reload()) .on('error', gutil.log); }); gulp.task('html-deploy', function() { gulp.src('app/*') .pipe(gulp.dest('dist')); gulp.src('app/.*') .pipe(gulp.dest('dist')); gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts')); gulp.src(['app/styles/*.css', '!app/styles/ styles.css']) .pipe(gulp.dest('dist/styles')); }); gulp.task('clean', function() { del('dist'); }); //this is our master task when you run `gulp` in CLI / Terminal //this is the main watcher to use when in active development // this will: // startup the web server, // start up livereload // compress all scripts and SCSS files gulp.task('default', ['connect', 'scripts', 'styles'], function() { gulp.watch('app/scripts/src/**', ['scripts']); gulp.watch('app/styles/scss/**', ['styles']); gulp.watch('app/*.html', ['html']); }); gulp.task('deploy', ['clean'], function () { gulp.start('scripts-deploy', 'styles- deploy', 'html-deploy', 'images-deploy'); });
  11. 11. PROBLEM?
  12. 12. The Proposal: Concern Separa:on
  13. 13. Build Pipeline → Webpack
 Task Management → NPM
  14. 14. So…?
  15. 15. Webpack
  16. 16. Webpack
  17. 17. What is Webpack?
  18. 18. What is Webpack? • Module bundler
  19. 19. What is Webpack? • Module bundler • Supercharges require
  20. 20. What is Webpack? • Module bundler • Supercharges require • Anything is require-able
  21. 21. What is Webpack? • Module bundler • Supercharges require • Anything is require-able • TransformaNons are based on loaders
  22. 22. What is Webpack? • Module bundler • Supercharges require • Anything is require-able • TransformaNons are based on loaders • Other tasks can be implemented as plugins
  23. 23. What is Webpack? • Module bundler • Supercharges require • Anything is require-able • TransformaNons are based on loaders • Other tasks can be implemented as plugins • Outputs assets in single or mulNple files
  24. 24. What is Webpack? • Module bundler • Supercharges require • Anything is require-able • TransformaNons are based on loaders • Other tasks can be implemented as plugins • Outputs assets in single or mulNple files • Built-in hashing → Easy cache invalidaNons
  25. 25. Webpack Features
  26. 26. How does Webpack?
  27. 27. J S X How does Webpack?
  28. 28. J S X J S ( E S 5 ) babel-loader How does Webpack?
  29. 29. J S X J S ( E S 5 ) babel-loader S C S S How does Webpack?
  30. 30. J S X J S ( E S 5 ) babel-loader S C S S C S S postcss-loader How does Webpack?
  31. 31. J S X J S ( E S 5 ) babel-loader S C S S C S S postcss-loader P N G How does Webpack?
  32. 32. J S X J S ( E S 5 ) babel-loader S C S S C S S postcss-loader P N G B A S E 6 4 file-loader How does Webpack?
  33. 33. J S X J S ( E S 5 ) babel-loader S C S S C S S postcss-loader P N G B A S E 6 4 file-loader B U N D L E . J S How does Webpack?
  34. 34. const path = require('path') const CopyPlugin = require('copy-webpack-plugin') module.exports = { entry: "./index.js", output: { path: path.join(__dirname, 'dist'), filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style!css" }, { test: /.js$/, loader: "babel" }, { test: /.(svg|ttf|otf|eot|woff|woff2|png|jpg|gif)$/, loader: "file" } ] }, plugins: [ new CopyPlugin([ { from: 'index.html' } ]), new Uglify([ { from: 'index.html' } ]) ] } Webpack Configura:on File
  35. 35. webpack.github.io/docs/tutorials/geOng-started
  36. 36. Ok, but how we do tasks?
  37. 37. Use NPM scripts
  38. 38. What are NPM scripts
  39. 39. What are NPM scripts
  40. 40. • Custom commands through run-script What are NPM scripts
  41. 41. • Custom commands through run-script • Pre-hooks for custom commands What are NPM scripts
  42. 42. • Custom commands through run-script • Pre-hooks for custom commands • Include package binary entry points What are NPM scripts
  43. 43. • Custom commands through run-script • Pre-hooks for custom commands • Include package binary entry points • Command composiNon What are NPM scripts
  44. 44. npm install -g
  45. 45. npm run-script npm run
  46. 46. IT’S DEMO TIME BYE GRUNT AND GULP
  47. 47. hXp://:ny.cc/kill-gg
  48. 48. Thanks! Ques:ons? @derekstavis github.com/derekstavis linkedin.com/in/derekstavis derekstavis@me.com

×