Всем привет, есть такой виджет как voxeet
вот ссылка https://developer.voxeet.com/, есть пример этого приложения на https://github.com/voxeet/voxeet-web-conferencekit. Мне надо интегрировать его на php фреймворк symfony.
Сейчас у меня так выглядит package.json
:
{
"name": "name",
"version": "0.1.0",
"private": true,
"author": "author",
"devDependencies": {
"fs": "0.0.1-security",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.3.2",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.1",
"gulp-image": "^2.7.2",
"gulp-imagemin": "^3.1.1",
"gulp-inline-css": "^3.1.0",
"gulp-newer": "^1.3.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-sourcemaps": "^1.9.1",
"gulp-uglify": "^2.1.0",
"inky": "^1.3.7",
"q": "^1.4.1",
"zen-grids": "^2.0.3"
}
}
В примере приложения package.json
выглядит так:
{
"name": "voxeet-web-conferencekit",
"version": "1.0.4",
"private": true,
"main": "./dist/bundle.js",
"scripts": {
"start": "webpack-dev-server -d --hot --inline --content-base",
"build": "webpack --config webpack.config.prod.js --progress -p"
},
"author": "Voxeet",
"dependencies": {
"@voxeet/react-components": "0.31.0-rc34",
"@voxeet/voxeet-web-sdk": "1.8.5",
"express": "^4.0.0",
"react": "^16.0.0",
"react-dom": "16.6.1",
"react-redux": "^5.0.7",
"react-scripts": "1.1.4"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.2.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"react-hot-loader": "^3.0.0-beta.7",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"peerDependencies": {
"@voxeet/voxeet-web-sdk": "^1.7.4",
"express": "^4.0.0"
},
"files": [
"README.md",
"dist/"
]
}
Вот мой gulpfile.js
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var fs = require('fs');
var Q = require('q');
var glob = require('glob');
var path = require('path');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var newer = require('gulp-newer');
var image = require('gulp-imagemin');
var inky = require('inky');
var yaml = require('js-yaml');
var util = require('gulp-util');
var config = {
dev: !!util.env.dev
};
gulp.task('assets:js:clean-dest', function(){
return gulp.src('./web/js')
.pipe(clean({
read: false,
force: true
}))
;
});
gulp.task('assets:version', function(){
var filePath = './app/config/config.yml';
var doc = fs.readFileSync(filePath, 'utf8');
var yml = null;
yml = yaml.load(doc);
yml.framework.assets.version = new Date().getTime() + '';
var updated = yaml.dump(yml);
fs.writeFileSync(filePath, updated);
return true;
});
gulp.task('assets:css:clean-dest', function(){
return gulp.src('./web/css')
.pipe(clean({
read: false,
force: true
}))
;
});
gulp.task('assets:js:minify', function(){
var promises = [];
glob.sync('./assets/js/*').forEach(function(dirPath){
if(fs.statSync(dirPath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(dirPath + '/**/*.js')
.pipe(
config.dev
? util.noop()
: uglify({preserveComments: 'license'})
)
.on('error', function(err){console.log(err);})
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./assets/js_min/' + path.basename(dirPath)));
pipeline.on('end', function(){
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
gulp.task('assets:js:concat', ['assets:js:clean-dest', 'assets:js:minify'], function(){
var promises = [];
glob.sync('./assets/js_min/*').forEach(function(dirPath){
if(fs.statSync(dirPath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(dirPath + '/**/*.js')
.pipe(concat(path.basename(dirPath) + '.min.js'))
.pipe(gulp.dest('./web/js/'));
pipeline.on('end', function(){
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
gulp.task('assets:sass:compile', function(){
var promises = [];
glob.sync('./assets/scss/!(common)', {'ignore': ['common']}).forEach(function(dirPath){
if(fs.statSync(dirPath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(dirPath + '/*.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css/' + path.basename(dirPath)));
pipeline.on('end', function(){
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
gulp.task('assets:css:minify', ['assets:sass:compile'], function(){
var promises = [];
glob.sync('./assets/css/*').forEach(function(dirPath){
if(fs.statSync(dirPath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(dirPath + '/**/*.css')
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./assets/css_min/' + path.basename(dirPath)));
pipeline.on('end', function(){
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
gulp.task('assets:css:concat', ['assets:css:minify', 'assets:css:clean-dest'], function(){
var promises = [];
glob.sync('./assets/css_min/*').forEach(function(dirPath){
if(fs.statSync(dirPath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(dirPath + '/**/*.css')
.pipe(concat(path.basename(dirPath) + '.min.css'))
.pipe(gulp.dest('./web/css/'));
pipeline.on('end', function(){
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
gulp.task('assets:images:process', function(){
return gulp.src('./assets/images/**')
.pipe(newer('./web/images'))
.pipe(image())
.pipe(gulp.dest('./web/images'))
;
return Q.all(promises);
});
gulp.task('assets:fonts:clean-dest', function(){
return gulp.src('./web/fonts/*')
.pipe(clean({
read: false,
force: true
}))
;
});
gulp.task('assets:fonts:copy', ['assets:fonts:clean-dest'], function(){
return gulp.src('./assets/fonts/*')
.pipe(gulp.dest('./web/fonts'))
;
});
gulp.task('assets:audio:copy', function(){
return gulp.src('./assets/audio/*')
.pipe(gulp.dest('./web/audio'))
;
});
gulp.task('inky:compile', [], function(){
return gulp.src('./app/Resources/views/Mails/inky/*')
.pipe(inky())
// .pipe(inlineCSS())
.pipe(gulp.dest('./app/Resources/views/Mails'));
});
gulp.task('default', ['js', 'images', 'fonts'], function(){
});
gulp.task('images', ['assets:images:process', 'assets:version'], function(){
});
gulp.task('audio', ['assets:audio:copy', 'assets:version'], function(){
});
gulp.task('fonts', ['assets:fonts:copy', 'assets:version'], function(){
});
gulp.task('js', ['assets:js:concat', 'assets:version'], function() {
});
gulp.task('css', ['assets:css:concat', 'assets:version'], function(){
});
Подскажите пожалуйста, как мне правильно подключить этот виджет себе, если у меня есть gulp
то мне же не стоит подключать babel
? Еще в инструкции к этому приложению есть yarn install
, мне и его обязательно ставить?
Простите за банальные вопросы, но во фронтенде я совсем новичок, а надо срочно подключить
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как сделать фиксированный скролл сайдбара по аналогии с тем, как это сделано на vistaprint?
Знаю такой вопрос уже есть в англоязычной stackoverflowНо мне не помогло ответ
Ссылки меню открываются в новой ВКЛАДКЕЕсть задача открывать их в новом ОКНЕ