This document discusses replacing Grunt and Gulp workflows with Webpack and NPM scripts for building frontend applications. It begins by introducing the speaker and their background. It then outlines problems with Grunt/Gulp and proposes using Webpack for build pipelines and NPM scripts for task management instead. Key features of Webpack are described, including its use of loaders and plugins to transform modules. Finally, it demonstrates setting up a basic Webpack configuration file and using NPM scripts for tasks like building and deploying.

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

2. Who?
• Derek Stavis
• So;ware Engineer @ Healfies
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis
• github.com/oh-my-fish

3. But before you ask

4. 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');
});

5. PROBLEM?

6. The Proposal:
Concern Separa:on

7. Build Pipeline → Webpack
Task Management → NPM

8. So…?

9. Webpack

10. What is Webpack?
• Module bundler
• Supercharges require
• Anything is require-able
• TransformaQons are based on loaders
• Other tasks can be implemented as plugins
• Outputs assets in single or mulQple files
• Built-in hashing → Easy cache invalidaQons

11. Webpack Features

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

13. 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

14. webpack.github.io/docs/tutorials/geOng-started

16. Just use NPM scripts

17. What are NPM scripts

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

19. npm install -g

20. npm run-script
npm run

21. IT’S DEMO TIME
BYE GRUNT AND GULP

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

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