Skip to content

Instantly share code, notes, and snippets.

@donhenton
Created June 15, 2016 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donhenton/ef40510f0affc86b5d15c73928512ded to your computer and use it in GitHub Desktop.
Save donhenton/ef40510f0affc86b5d15c73928512ded to your computer and use it in GitHub Desktop.
react and gulp for SPA development
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var notifier = require('node-notifier');
var server = require('gulp-server-livereload');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var notify = function(error) {
var message = 'In: ';
var title = 'Error: ';
if(error.description) {
title += error.description;
} else if (error.message) {
title += error.message;
}
if(error.filename) {
var file = error.filename.split('/');
message += file[file.length-1];
}
if(error.lineNumber) {
message += '\nOn Line: ' + error.lineNumber;
}
notifier.notify({title: title, message: message});
};
var bundler = watchify(browserify({
entries: ['./src/app.jsx'],
transform: [reactify],
extensions: ['.jsx'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
}));
function bundle() {
return bundler
.bundle()
.on('error', notify)
.pipe(source('main.js'))
.pipe(gulp.dest('./'))
}
bundler.on('update', bundle)
gulp.task('build', function() {
bundle()
});
gulp.task('serve', function(done) {
gulp.src('')
.pipe(server({
livereload: {
enable: true,
filter: function(filePath, cb) {
if(/main.js/.test(filePath)) {
cb(true)
} else if(/style.css/.test(filePath)){
cb(true)
}
else if(/index.html/.test(filePath))
{
cb(true)
}
}
},
open: true
}));
});
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['build', 'serve', 'sass', 'watch']);
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment