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

1. Forget Grunt & Gulp
Webpack & NPM tasks rule them all!

2. Who?
• Derek Stavis

3. Who?
• Derek Stavis
• Coding stuff since 2000

4. Who?
• Derek Stavis
• Coding stuff since 2000
• High level stuff

5. Who?
• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff

6. Who?
• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff

7. Who?
• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis

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. But before you ask

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. PROBLEM?

12. The Proposal:
Concern Separa:on

13. Build Pipeline → Webpack
Task Management → NPM

14. So…?

15. Webpack

16. Webpack

17. What is Webpack?

18. What is Webpack?
• Module bundler

19. What is Webpack?
• Module bundler
• Supercharges require

20. What is Webpack?
• Module bundler
• Supercharges require
• Anything is require-able

21. What is Webpack?
• Module bundler
• Supercharges require
• Anything is require-able
• TransformaNons are based on loaders

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. 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. 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. Webpack Features

26. How does Webpack?

27. J S X
How does Webpack?

28. J S X J S ( E S 5 )
babel-loader
How does Webpack?

29. J S X J S ( E S 5 )
babel-loader
S C S S
How does Webpack?

30. J S X J S ( E S 5 )
babel-loader
S C S S C S S
postcss-loader
How does Webpack?

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. 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. 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. 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. webpack.github.io/docs/tutorials/geOng-started

36. Ok, but how we do tasks?

39. Use NPM scripts

40. What are NPM scripts

41. What are NPM scripts

42. • Custom commands through run-script
What are NPM scripts

43. • Custom commands through run-script
• Pre-hooks for custom commands
What are NPM scripts

44. • Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
What are NPM scripts

45. • Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
• Command composiNon
What are NPM scripts

46. npm install -g

47. npm run-script
npm run

48. IT’S DEMO TIME
BYE GRUNT AND GULP

49. hXp://:ny.cc/kill-gg

50. Thanks!
Ques:ons?
@derekstavis
github.com/derekstavis
linkedin.com/in/derekstavis
derekstavis@me.com