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

Forget Grunt & GulpWebpack & NPM tasks rule them all!

Who?• Derek Stavis

http://github.com/derekstavis

http://github.com/oh-my-fish


• Coding stuff since 2000





• High level stuff






• Low level stuff






• Low level stuff

• Design stuff






• Low level stuff

• Design stuff

• github.com/derekstavis






• Low level stuff

• Design stuff

• github.com/derekstavis

• github.com/oh-my-fish



But before you ask

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

PROBLEM?

The Proposal: Concern Separa:on

Build Pipeline → WebpackTask Management → NPM

So…?

Webpack

What is Webpack?

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






• Outputs assets in single or mulNple files

• Built-in hashing → Easy cache invalidaNons

Webpack Features

How does Webpack?

J S X

How does Webpack?

J S X J S ( E S 5 )babel-loader

How does Webpack?


S C S S

How does Webpack?


S C S S C S Spostcss-loader

How does Webpack?



P N G

How does Webpack?



P N G B A S E 6 4file-loader

How does Webpack?



P N G B A S E 6 4file-loader

B U N D L E . J S

How does Webpack?

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

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

http://webpack.github.io/docs/tutorials/getting-started

Ok, but how we do tasks?

Use NPM scripts

What are NPM scripts

• Custom commands through run-script



• Pre-hooks for custom commands




• Include package binary entry points




• Include package binary entry points

• Command composiNon


npm install -g

npm run-script

npm run

IT’S DEMO TIME

BYE GRUNT AND GULP

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

Thanks! Ques:ons?

@derekstavis github.com/derekstavis

linkedin.com/in/derekstavis [email protected]

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

Technology

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