Created
October 25, 2016 20:00
-
-
Save skliarov/d25c5156bfa8a2f7577722ecfaa17b04 to your computer and use it in GitHub Desktop.
Gulp config for React project with ES6, browser sync, SASS/SCSS compilation & injection, production builds with minified JS and CSS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'); | |
var sass = require('gulp-sass'); | |
var gutil = require('gulp-util'); | |
var size = require('gulp-size') | |
var uglify = require('gulp-uglify') | |
var cleanCSS = require('gulp-clean-css'); | |
var browserify = require('browserify'); | |
var babelify = require('babelify'); | |
var watchify = require('watchify'); | |
var buffer = require('vinyl-buffer'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var source = require('vinyl-source-stream'); | |
var browserSync = require('browser-sync'); | |
// No matter what URL query - serve ./index.html | |
var historyApiFallback = require('connect-history-api-fallback') | |
// Init JS bundler | |
var bundler = watchify(browserify('src/js/app.js', watchify.args)); | |
// Use ES6, React, Object rest spread (3 dots syntax) | |
bundler.transform(babelify, { | |
presets: ["es2015", "react"], | |
plugins: ["transform-object-rest-spread"] | |
}) | |
function bundle() { | |
return bundler.bundle() | |
.on('error', gutil.log.bind(gutil, 'Browserify Error')) | |
.pipe(source('app.js')) | |
.pipe(buffer()) | |
.pipe(size()) | |
.pipe(sourcemaps.init({ loadMaps: true })) | |
.pipe(sourcemaps.write('../tmp')) | |
.pipe(gulp.dest('dist')) | |
.pipe(browserSync.stream({ once: true })); | |
} | |
function minBundle() { | |
browserify('src/js/app.js') | |
.transform(babelify, { | |
presets: ["es2015", "react"], | |
plugins: ["transform-object-rest-spread"] | |
}) | |
.bundle() | |
.pipe(source('app.js')) | |
.pipe(buffer()) | |
.pipe(size({ title: 'JS before uglify' })) | |
.pipe(uglify()) | |
.pipe(size({ title: 'JS after uglify' })) | |
.pipe(gulp.dest('dist')); | |
} | |
// Rebundle JS for development (fast, big file) | |
gulp.task('js', bundle); | |
// Rebundle JS for production (slow, small file) | |
gulp.task('min-js', minBundle); | |
// Rebuild SASS for development | |
gulp.task('sass', function() { | |
gulp.src('src/css/app.scss') | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(gulp.dest('dist')) | |
.pipe(browserSync.stream()); | |
}); | |
// Rebuild SASS for production | |
gulp.task('min-sass', function() { | |
gulp.src('src/css/app.scss') | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(size({ title: 'SASS before cleanCSS' })) | |
.pipe(cleanCSS()) | |
.pipe(size({ title: 'SASS after cleanCSS' })) | |
.pipe(gulp.dest('dist')); | |
}); | |
// Copy HTML files (single index.html) to dist folder | |
gulp.task('copy-html', function() { | |
gulp.src('src/index.html') | |
.pipe(gulp.dest('dist')) | |
.pipe(browserSync.stream({ once: true })); | |
}); | |
// Copy all images to dist folder | |
gulp.task('copy-images', function() { | |
gulp.src('src/images/**/*') | |
.pipe(gulp.dest('dist/images')); | |
}); | |
// Copy all fonts to dist folder | |
gulp.task('copy-fonts', function() { | |
gulp.src('src/fonts/**/*') | |
.pipe(gulp.dest('dist/fonts')); | |
}); | |
gulp.task('default', ['js', 'sass', 'copy-html'], function() { | |
browserSync({ | |
server: { | |
baseDir: 'dist', | |
middleware: [ historyApiFallback() ] | |
}, | |
browser: 'google chrome' | |
}); | |
gulp.watch('src/js/**/*.*', ['js']); | |
gulp.watch('src/css/**/*.*', ['sass']); | |
gulp.watch('src/index.html', ['copy-html']); | |
}); | |
gulp.task('build', ['min-js', 'min-sass', 'copy-html', 'copy-fonts', 'copy-images'], function() {}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment