Skip to content

Instantly share code, notes, and snippets.

@konsumer

konsumer/gulpfile.js

Created December 12, 2014 05:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save konsumer/6ac79096befe86e813bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save konsumer/6ac79096befe86e813bb to your computer and use it in GitHub Desktop.
Download ZIP
Simple gulpfile for 90% of your react projects
Raw
gulpfile.js
var gulp = require('gulp-help')(require('gulp')),
util = require('gulp-util'),
tap = require('gulp-tap'),
source = require('vinyl-source-stream'),
streamify = require('gulp-streamify'),
merge = require('merge-stream'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
minifyHTML = require('gulp-minify-html'),
browserify = require('browserify'),
reactify = require('reactify'),
livereload = require('gulp-livereload'),
less = require('gulp-less'),
trash = require('trash'),
LessPluginCleanCSS = require('less-plugin-clean-css'),
LessPluginAutoPrefix = require('less-plugin-autoprefix'),
cleancss = new LessPluginCleanCSS({advanced: true}),
Server = new require('node-static').Server,
path = require('path');
// just build, don't minify
gulp.task('build:js:dev', false, function(){
var b = browserify();
b.transform(reactify);
b.add('./src/jsx/index.jsx');
return merge(
gulp.src(['./src/js/**/*']).pipe(gulp.dest('./build/app')),
gulp.src(['package.json']).pipe(gulp.dest('./build/app')),
b.bundle().pipe(source('app.js')).pipe(gulp.dest('./build/app'))
);
});
// just build, don't minify & clean
gulp.task('build:css:dev', false, function(){
return gulp.src('./src/less/app.less')
.pipe(less({
paths: [
path.join(__dirname, 'node_modules', 'material-ui', 'src', 'less'),
path.join(__dirname, 'src', 'less')
],
plugins: [
]
}))
.pipe(gulp.dest('./build/app'));
});
// called after npm installs modules to fix up things
gulp.task('postinstall', false, function(){
});
// fast/light build for development
gulp.task('build:dev', false, ['clean', 'build:html', 'build:img', 'build:css:dev','build:js:dev']);
gulp.task('clean', 'delete built files', function(done) {
trash(['./build'], done);
});
gulp.task('build:js', 'build & minify just application javascript', function(){
var b = browserify();
b.transform(reactify);
b.add('./src/jsx/index.jsx');
return merge(
gulp.src(['./src/js/**/*']).pipe(streamify(uglify())).pipe(gulp.dest('./build/app')),
gulp.src(['package.json']).pipe(gulp.dest('./build/app')),
b.bundle().pipe(source('app.js')).pipe(streamify(uglify())).pipe(gulp.dest('./build/app'))
);
});
gulp.task('build:css', 'build & minify just application CSS', function(){
return gulp.src('./src/less/app.less')
.pipe(less({
paths: [
path.join(__dirname, 'src', 'less')
],
plugins: [
cleancss
]
}))
.pipe(gulp.dest('./build/app/'));
});
gulp.task('build:img', 'optimize images', function(){
return gulp.src('./src/images/**/*')
.pipe(imagemin({}))
.pipe(gulp.dest('./build/app/images'));
});
gulp.task('build:html', 'minify HTML', function(){
return gulp.src('./src/html/**/*.html')
.pipe(minifyHTML())
.pipe(gulp.dest('./build/app/'));
});
gulp.task('build', 'build application CSS & javascript for production', ['clean', 'build:html', 'build:img', 'build:css','build:js']);
gulp.task('server', function() {
var file = new Server('./build/app/');
require('http').createServer(function (req, res) {
req.addListener('end', function () {
file.serve(req, res);
}).resume();
}).listen(8080);
util.log('Server started on http://0.0.0.0:8080');
});
gulp.task('watch', 'watch for changes, for development', ['build:dev', 'server'], function(){
livereload.listen();
gulp.watch('./src/jsx/**/*.jsx', ['build:js:dev']).on('change', livereload.changed);
gulp.watch('./src/less/**/*.less',['build:css:dev']).on('change', livereload.changed);
gulp.watch('./src/images/**/*', ['build:img']).on('change', livereload.changed);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment