More Related Content Similar to Forget Grunt and Gulp! Webpack and NPM rule them all! (20) More from Derek Willian Stavis (7) Forget Grunt and Gulp! Webpack and NPM rule them all!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
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');
});
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
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
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