0.1.1 • Published 10 years ago
gulp-direact v0.1.1
gulp-direact
Precompiler that allows usage of React components directly inside markup as custom tags.
Markup usage
<!DOCTYPE html>
<html>
<head><title>Gulp Direact \o/</title></head>
<body>
<!-- using my component directly inside my markup -->
<Clock color="red" />
<!-- including React and my component's source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<script src="/js/Clock.js"></script>
</body>
</html>Gulp usage
var gulp = require('gulp');
var react = require('gulp-react');
var direact = require('gulp-direact');
var prettify = require('gulp-prettify');
var path = {
HTML: 'src/index.html',
ALL: ['src/js/*.js', 'src/js/**/*.js', 'src/index.html'],
JS: ['src/js/*.js', 'src/js/**/*.js'],
DEST_JS: 'dist/js',
DEST: 'dist'
};
gulp.task('transformJS', function(){
gulp.src(path.JS)
.pipe(react())
.pipe(gulp.dest(path.DEST_JS));
});
gulp.task('transformHTML', function(){
gulp.src(path.HTML)
.pipe(direact())
.pipe(prettify())
.pipe(gulp.dest(path.DEST));
});
gulp.task('watch', function(){
gulp.watch(path.ALL, ['transformJS', 'transformHTML']);
});
gulp.task('default', ['transformJS', 'transformHTML']);