Upload
derek-willian-stavis
View
422
Download
1
Embed Size (px)
Citation preview
Forget Grunt & GulpWebpack & NPM tasks rule them all!
Who?• Derek Stavis
• Coding stuff since 2000
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• Low level stuff
• Design stuff
• github.com/derekstavis
Who?• Derek Stavis
• Coding stuff since 2000
• High level stuff
• 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
Webpack
What is Webpack?
What is Webpack?• Module bundler
What is Webpack?• Module bundler
• Supercharges require
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
• TransformaNons are based on loaders
What is Webpack?• Module bundler
• Supercharges require
• Anything is require-able
• TransformaNons are based on loaders
• Other tasks can be implemented as plugins
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
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
Webpack Features
How does Webpack?
J S X
How does Webpack?
J S X J S ( E S 5 )babel-loader
How does Webpack?
J S X J S ( E S 5 )babel-loader
S C S S
How does Webpack?
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
How does Webpack?
J S X J S ( E S 5 )babel-loader
S C S S C S Spostcss-loader
P N G
How does Webpack?
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?
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?
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
Ok, but how we do tasks?
Use NPM scripts
What are NPM scripts
What are NPM scripts
• Custom commands through run-script
What are NPM scripts
• Custom commands through run-script
• Pre-hooks for custom commands
What are NPM scripts
• Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
What are NPM scripts
• Custom commands through run-script
• Pre-hooks for custom commands
• Include package binary entry points
• Command composiNon
What are NPM scripts
npm install -g
npm run-script
npm run
IT’S DEMO TIME
BYE GRUNT AND GULP
hXp://:ny.cc/kill-gg