Всем привет!
В общем такая проблема пытаюсь настроить GULP для работы с WebPack и React js, но при первом запуске все отлично, но стоит поменять какой то файл js или jsx то все то отваливаются
Uncaught SyntaxError: Unexpected token import
то говорит что
Uncaught Invariant Violation: There is no registered component for the tag div
.
Сам веб пак, через 5 раз реагирует на изменения в файлах, непонятно как победить.
Пересмотрел все видео от Ильи Кантора
https://www.youtube.com/playlist?list=PLDyvV36pndZ... и
https://www.youtube.com/playlist?list=PLDyvV36pndZ...
Поковырял исходники
https://github.com/iliakan/gulp-screencast/blob/ma... и вот тут
https://github.com/iliakan/gulp-screencast/blob/ma... но ничего дельного не происходит вся та же проблема.
Кому не жалко поделитесь конфигом который действительно работает ?
Код
https://jsfiddle.net/j59f9ebv/// Дефолтный шаблон, подлежит модификации под проект
import gulp from 'gulp';
import jade from 'gulp-jade';
import stylus from 'gulp-stylus';
// import csso from 'gulp-csso';
// import concat from 'gulp-concat';
import autoprefixer from 'gulp-autoprefixer';
import bs from 'browser-sync';
import debug from 'gulp-debug';
import sourcemaps from 'gulp-sourcemaps';
import del from 'del';
import sb2 from 'stream-combiner2';
import notify from 'gulp-notify';
import typograf from 'gulp-typograf';
// import babel from 'gulp-babel';
import wd from 'wiredep';
import csscomb from 'gulp-csscomb';
import useref from 'gulp-useref';
import webpack from 'webpack';
//import named from 'vinyl-named';
import gulplog from 'gulplog';
//const webpack = webpackStream.webpack;
const wpConfig = {
output: {
path: "/public",
filename: "[name].js"
},
watch: true,
devtool: 'source-map',
module: {
loaders: [
{
test: /\.jsx?$/g,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
const combiner = sb2.obj;
const wiredep = wd.stream;
const typografConfig = {
lang: 'ru',
mode: 'digit',
disable: ['ru/optalign/*'],
enable: ['ru/nbsp/*'] };
// Styles
gulp.task('styles', () => combiner(
gulp.src('src/styles/main.styl'),
debug({ title: 'styles' }),
sourcemaps.init(),
debug({ title: 'stylus' }),
stylus(),
debug({ title: 'autoprefixer' }),
autoprefixer({ browsers: ['last 15 versions'], cascade: false }),
csscomb(),
sourcemaps.write(),
gulp.dest('public/styles/')
).on('error', notify.onError()));
// Jade
gulp.task('jade', () => combiner(
gulp.src(['src/template/*.jade', '!src/template/_*.jade']),
debug({ title: 'jade' }),
jade({ pretty: true }),
typograf(typografConfig),
useref({ searchPath: ['app', '.'] }),
gulp.dest('public')
).on('error', notify.onError()));
// Assets
gulp.task('assets', () => combiner(
gulp.src('src/assets/**/*.*', { since: gulp.lastRun('assets') }),
debug({ title: 'assets' }),
gulp.dest('public')
).on('error', notify.onError()));
// Webpack
gulp.task('webpack', function(callback) {
let options = {
entry: {
main: './src/scripts/main',
},
output: {
path: './public/scripts/',
filename: '[name].js'
},
watch: true,
devtool: 'cheap-module-inline-source-map',
module: {
loaders: [
{
test: /\.jsx?$/g,
loader: 'babel',
query: {
presets: ['react','es2015']
}
}
]
},
plugins: [
new webpack.NoErrorsPlugin() // otherwise error still gives a file
]
};
webpack(options, function(err, stats) {
/* if (!err) {
err = stats.toJson().errors[0];
}*/
/*if (err) {
notify.onError(err);
gulplog.error(err);
} else {
gulplog.info(stats.toString({
colors: true
}));
}*/
if (!options.watch && err) {
callback(err);
} else {
callback();
}
});
});
// Watch
gulp.task('watch', () => {
gulp.watch('src/styles/**/*.styl', gulp.series('styles'));
gulp.watch('src/template/**/*.jade', gulp.series('jade'));
//gulp.watch(['src/scripts/**/*.js', 'src/scripts/**/*.jsx'], gulp.series('scripts'));
gulp.watch('src/assets/**/*.*', gulp.series('assets'));
gulp.watch('bower.json', gulp.series('wiredep'));
});
// Clean
gulp.task('clean', (callback) => {
del('public');
return callback();
});
// Build
gulp.task('build', gulp.series(
gulp.parallel('styles', 'jade', 'assets')
));
// Serve
gulp.task('serve', () => {
bs.init({ server: 'public' });
bs.watch('public/**/*.*').on('change', bs.reload);
});
// Wiredep
gulp.task('wiredep', (callback) => {
gulp.src('src/template/_layout.jade')
.pipe(wiredep({ ignorePath: /^(\.\.\/)*\.\./ }))
.pipe(gulp.dest('src/template'));
callback();
});
// Start
gulp.task('start', gulp.series(
'build',
gulp.parallel('watch', 'serve')
));
Простой
Простой
