![Page 1: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/1.jpg)
Forget Grunt & GulpWebpack & NPM tasks rule them all!
![Page 3: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/3.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
![Page 4: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/4.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
![Page 5: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/5.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
![Page 6: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/6.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
![Page 7: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/7.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis
![Page 8: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/8.jpg)
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis
• github.com/oh-my-fish
![Page 9: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/9.jpg)
But before you ask
![Page 10: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/10.jpg)
Gulp Configura:on Filevar 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'); });
![Page 11: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/11.jpg)
PROBLEM?
![Page 12: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/12.jpg)
The Proposal: Concern Separa:on
![Page 13: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/13.jpg)
Build Pipeline → WebpackTask Management → NPM
![Page 14: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/14.jpg)
So…?
![Page 15: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/15.jpg)
Webpack
![Page 16: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/16.jpg)
Webpack
![Page 17: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/17.jpg)
What is Webpack?
![Page 18: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/18.jpg)
What is Webpack?• Module bundler
![Page 19: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/19.jpg)
What is Webpack?• Module bundler
• Supercharges require
![Page 20: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/20.jpg)
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
![Page 21: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/21.jpg)
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
• TransformaNons are based on loaders
![Page 22: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/22.jpg)
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
• TransformaNons are based on loaders
• Other tasks can be implemented as plugins
![Page 23: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/23.jpg)
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
![Page 24: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/24.jpg)
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
![Page 25: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/25.jpg)
Webpack Features
![Page 26: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/26.jpg)
How does Webpack?
![Page 27: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/27.jpg)
J S X
How does Webpack?
![Page 28: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/28.jpg)
J S X J S ( E S 5 )babel-loader
How does Webpack?
![Page 29: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/29.jpg)
J S X J S ( E S 5 )babel-loader
S C S S
How does Webpack?
![Page 30: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/30.jpg)
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
How does Webpack?
![Page 31: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/31.jpg)
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
P N G
How does Webpack?
![Page 32: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/32.jpg)
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
P N G B A S E 6 4file-loader
How does Webpack?
![Page 33: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/33.jpg)
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
P N G B A S E 6 4file-loader
B U N D L E . J S
How does Webpack?
![Page 34: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/34.jpg)
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
![Page 35: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/35.jpg)
webpack.github.io/docs/tutorials/geOng-started
![Page 36: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/36.jpg)
Ok, but how we do tasks?
![Page 37: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/37.jpg)
![Page 38: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/38.jpg)
![Page 39: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/39.jpg)
Use NPM scripts
![Page 40: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/40.jpg)
What are NPM scripts
![Page 41: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/41.jpg)
What are NPM scripts
![Page 42: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/42.jpg)
• Custom commands through run-script
What are NPM scripts
![Page 43: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/43.jpg)
• Custom commands through run-script
• Pre-hooks for custom commands
What are NPM scripts
![Page 44: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/44.jpg)
• Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
What are NPM scripts
![Page 45: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/45.jpg)
• Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
• Command composiNon
What are NPM scripts
![Page 46: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/46.jpg)
npm install -g
![Page 47: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/47.jpg)
npm run-script
npm run
![Page 48: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/48.jpg)
IT’S DEMO TIME
BYE GRUNT AND GULP
![Page 49: Forget Grunt and Gulp! Webpack and NPM rule them all!](https://reader031.vdocuments.us/reader031/viewer/2022022414/587507cd1a28ab29208b675b/html5/thumbnails/49.jpg)
hXp://:ny.cc/kill-gg