Answer the question
In order to leave comments, you need to log in
How to build jsx using browserify?
I found a couple of examples of how to assemble, they use a bunch of modules, but I didn’t succeed either.
I just decided to first translate gulp-react into js and after a couple of seconds collect everything into one browserify module.
But damn it, I don’t see any changes at all, not a single task is executed when I change the file. I don’t know why it’s like this ((
But damn everything is going, only the watch doesn’t work normally. What could be the mistake? or offer a friend to collect it so that everything works out)
var gulp = require('gulp'),
cssPrefixer = require('gulp-autoprefixer'),
cssMin = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
jsMin = require('gulp-uglify'),
watch = require('gulp-watch'),
//react
react = require('gulp-react'),
browserify = require('gulp-browserify'),
rimraf = require('rimraf'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
/*------------------------------------*\
#PATH
\*------------------------------------*/
var path = {
dist:{
html:'./dist/',
css:'./dist/css/',
js:'./dist/js/',
jsx:'src/js/',
img:'./dist/images/',
font:'./dist/fonts/',
libs:'./dist/libs/'
},
src:{
html:'./src/*.html',
css:'src/sass/index.scss',
js:'src/js/index.js',
jsx:'src/js/*.jsx',
img:'src/images/**/*.*',
font:'src/fonts/**/*.*',
libs:'src/libs/**/*.*'
},
watch:{
html:'./src/*.html',
css:'./src/sass/**/*.*',
js:'./src/js/**/*.*',
img:'./src/images/**/*.*',
font:'./src/fonts/**/*.*'
},
clean:'./dist/'
};
/*------------------------------------*\
#CONFIG SERVER
\*------------------------------------*/
var config = {
server: {
baseDir: "./dist"
},
tunnel: false,
host: 'localhost',
port: 8080,
logPrefix: "Front-end"
};
/*------------------------------------*\
#TASKS
\*------------------------------------*/
// #server
gulp.task('webserver', function () {
browserSync(config);
});
// #clean
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
// #html
gulp.task('html', function () {
gulp.src(path.src.html)
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream: true}));
});
// #javascript
gulp.task('js', function () {
gulp.src(path.src.js)
.pipe(browserify({
}))
.pipe(jsMin())
.pipe(rename('app.min.js'))
.pipe(gulp.dest(path.dist.js))
.pipe(reload({stream: true}));
});
// #jsx
gulp.task('jsx',function(){
gulp.src(path.src.jsx)
.pipe(react())
.pipe(rename({
suffix:'-react'
}))
.pipe(gulp.dest(path.dist.jsx));
setTimeout(function(){
gulp.start('js');
},2000);
});
// #libs
gulp.task('libs',function(){
gulp.src(path.src.libs)
.pipe(gulp.dest(path.dist.libs));
});
// #sass
gulp.task('style', function () {
gulp.src(path.src.css)
.pipe(sass({
}).on('error',sass.logError))
.pipe(cssPrefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(cssMin())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(path.dist.css))
.pipe(reload({stream: true}));
});
// #images
gulp.task('image', function () {
gulp.src(path.src.img)
.pipe(gulp.dest(path.dist.img))
.pipe(reload({stream: true}));
});
// #fonts
gulp.task('fonts', function() {
gulp.src(path.src.font)
.pipe(gulp.dest(path.dist.font));
});
/*------------------------------------*\
#BUILD TASK
\*------------------------------------*/
gulp.task('build', [
'html',
'jsx',
'style',
'fonts',
'image',
'libs'
]);
/*------------------------------------*\
#WATCH TASK
\*------------------------------------*/
gulp.task('watch', function(){
watch([path.watch.html], function(event, cb) {
gulp.start('html');
});
watch([path.watch.css], function(event, cb) {
gulp.start('style');
});
watch([path.watch.js], function(event, cb) {
gulp.start('jsx');
});
watch([path.watch.jsx], function(event, cb) {
gulp.start('jsx');
});
watch([path.watch.img], function(event, cb) {
gulp.start('image');
});
watch([path.watch.font], function(event, cb) {
gulp.start('fonts');
});
});
/*------------------------------------*\
#DEFAULT TASK
\*------------------------------------*/
gulp.task('default', ['build', 'webserver', 'watch']);
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question