After changing gulp 3 to 4 I receive the error when I try to run gulp build:
Error: File not found with singular glob: /assets/css/argon.css (if this was purposeful, use `allowEmpty` option)
The code was working before with gulp 3 (as I was told) and I made a couple of changes to be able to work with gulp 4 as well. The error is received after all tasks has run correcltly.
File is located where it is looking for it:
And here is my gulpfile.js:
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var csscomb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var cssnano = require('gulp-cssnano');
var composer = require('gulp-uglify/composer');
var concat = require('gulp-concat');
var del = require('del');
var imagemin = require('gulp-imagemin');
var htmlPrettify = require('gulp-html-prettify');
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var gulpRun = require('gulp-run');
var gulpUtil = require('gulp-util');
var npmDist = require('gulp-npm-dist');
var postcss = require('gulp-postcss');
var runSequence = require('gulp4-run-sequence');
// var sass = require('gulp-sass');
var uglifyEs = require('uglify-es');
var uglify = composer(uglifyEs, console);
var rename = require('gulp-rename');
var useref = require('gulp-useref-plus');
var wait = require('gulp-wait');
var sass = require('gulp-sass')(require('sass'));
// Define paths
var paths = {
dist: {
base: 'dist',
img: 'dist/assets/img',
libs: 'dist/assets/vendor'
},
base: {
base: './',
node: 'node_modules'
},
src: {
base: './',
css: 'assets/css',
html: '**/*.html',
img: 'assets/img/**/*.+(png|jpg|gif|svg)',
js: 'assets/js/**/*.js',
scss: 'assets/scss/**/*.scss'
}
}
// Compile SCSS
gulp.task('scss', async function() {
return gulp.src(paths.src.scss)
.pipe(wait(500))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([require('postcss-flexbugs-fixes')]))
.pipe(autoprefixer({
browsers: ['> 1%']
}))
.pipe(csscomb())
.pipe(gulp.dest(paths.src.css))
.pipe(browserSync.reload({
stream: true
}));
});
// Minify CSS
gulp.task('minify:css', async function() {
return gulp.src([
paths.src.css + '/argon.css'
])
.pipe(cleanCss())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.dist.base + '/css'))
});
// Concat JS files
gulp.task('concat:js', async function(done) {
files = [
paths.src.base + '/assets/js/components/license.js',
paths.src.base + '/assets/js/components/layout.js',
paths.src.base + '/assets/js/components/init/*js',
paths.src.base + '/assets/js/components/custom/*js',
paths.src.base + '/assets/js/components/maps/*js',
paths.src.base + '/assets/js/components/charts/*js',
paths.src.base + '/assets/js/components/vendor/*js'
];
return gulp
.src(files)
.pipe(concat("argon.js"))
.pipe(gulp.dest(paths.dist.base + '/js'));
done();
});
// Minify JS
gulp.task('minify:js', async function(cb) {
return gulp.src([
paths.dist.base + '/js/argon.js'
])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.dist.base + '/js'))
});
// Live reload
gulp.task('browserSync', async function() {
browserSync.init({
server: {
baseDir: [paths.src.base, paths.base.base]
},
})
});
// Watch for changes
gulp.task('watch', gulp.series('browserSync', 'scss', async function() {
gulp.watch(paths.src.scss, ['scss']);
gulp.watch(paths.src.js, browserSync.reload);
gulp.watch(paths.src.html, browserSync.reload);
}));
// Clean
gulp.task('clean:dist', async function() {
return del.sync(paths.dist.base);
});
// Copy CSS
gulp.task('copy:css', async function() {
return gulp.src([
paths.src.base + '/assets/css/argon.css'
])
.pipe(gulp.dest(paths.dist.base + '/css'))
});
// Copy JS
gulp.task('copy:js', async function() {
return gulp.src([
paths.src.base + '/assets/js/argon.js'
])
.pipe(gulp.dest(paths.dist.base + '/js'))
});
// Build
gulp.task('build', async function(callback) {
runSequence('clean:dist', 'scss', 'copy:css', 'copy:js', 'concat:js', 'minify:js', 'minify:css',
callback);
});
// Default
gulp.task('default', async function(callback) {
runSequence(['scss', 'browserSync', 'watch'],
callback
)
});
Any help would be appreciated :)
In copy:css you have this line:
paths.src.base + '/assets/css/argon.css'
where apparently your error is. The problem is your paths.src.base is defined as
base: './' to which you are adding /assets/css/argon.css so you end up with
.//assets/css/argon.css note the two leading backslashes.
Get rid of the leading backslash in the /assets/... and check the rest of your code for the same problem.
Also since you are using gulp4 get rid of runSequence - look at the documentation for gulp.series.
Related
my gulp watch keeps on a rebuild after saving js file, the Scss file working well, the problem is when saving other files inside the project folder, changing or replacing images, triggers the rebuild to start and finish building dist folder.
only while saving Scss files, the build starts and finishes as accepted.
terminal output:
[17:53:11] Starting 'js-build'...
[17:53:11] Finished 'js-build' after 452 ms
[17:53:11] Starting 'js-build'...
[17:53:12] Finished 'js-build' after 614 ms
[17:53:12] Starting 'js-build'...
please advice?
my gulp code:
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
babel = require('gulp-babel');
uglify = require('gulp-uglify-es').default,
cssnano = require('gulp-cssnano'),
plumber = require('gulp-plumber'),
gcmq = require('gulp-group-css-media-queries'),
rename = require('gulp-rename'),
pngquant = require('imagemin-pngquant'),
cache = require('gulp-cache'),
concat = require('gulp-concat'),
del = require('del'),
sass = require('gulp-sass'),
scss = require('gulp-scss'),
browserSync = require('browser-sync'),
server = browserSync.create(),
fileinclude = require('gulp-file-include');
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
server: {
baseDir: './dist'
}
});
done();
}
gulp.task('html', function() {
return gulp.src('*.html')
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('dist'))
});
var scssFiles = [
'./scss/**/*.scss',
'!./node_modules/**',
'!./dist/**',
];
var jsFiles = [
'**/*.js',
'!./node_modules/**',
'!gulpfile.js',
'!./dist/**',
];
var imgFiles = [
'**/*.{jpg,png,jpeg,svg,gif,ico}',
'!./node_modules/**',
'!./dist/**',
];
var fontFiles = [
'fonts/**/*.*',
'!./node_modules/**',
'!./dist/**',
];
gulp.task('scss', function() {
var postCSSplugins = [
autoprefixer({ browsers: ['last 2 version'] }),
];
return gulp.src(scssFiles)
.pipe(sass())
// .pipe(concat('app.css'))
.pipe(plumber()) //if need unoptimezed file - comment this line
.pipe(gcmq()) //if need unoptimezed file - comment this line
.pipe(cssnano()) //if need unoptimezed file - comment this line
.pipe(gulp.dest('dist/css/'))
.pipe(server.stream()) //if need unoptimezed file - comment this line
});
gulp.task('js-build', function () {
return gulp.src(jsFiles)
.pipe(plumber())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('img', function() {
return gulp.src(imgFiles)
.pipe(gulp.dest('dist/'))
});
gulp.task('font', function() {
return gulp.src(fontFiles)
.pipe(gulp.dest('dist/fonts'))
});
gulp.task('watch', function() {
gulp.watch(scssFiles, gulp.series('scss'), reload);
gulp.watch('*.html', gulp.series('html'));
gulp.watch(jsFiles, gulp.series('js-build'));
gulp.watch(imgFiles, gulp.series('img'));
});
gulp.task('clean', function() {
return del('./dist');
});
gulp.task('build', gulp.parallel('scss', 'html', 'js-build', 'img', 'font'));
gulp.task('serve', gulp.parallel('watch', serve));
gulp.task('default', gulp.series('clean', 'build', 'serve'));
I am new to using gulp and browsersync. I am attempting to have it so whenever I make a change in any of my files: css, js, or html the live preview will refresh and show me the changes. I have made tasks that all work when they are called but once I run my browserSync it only refreshes on my index.html changes.
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
htmlclean = require('gulp-htmlclean'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
dist: 'dist/'
};
//image processing
gulp.task('images', function(){
var out = folder.dist + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({ optimizationLevel: 5}))
.pipe(gulp.dest(out));
});
//HTML processing
gulp.task('html', ['images'], function(){
var
out = folder.dist + 'html/',
page = gulp.src(folder.src + 'html/**/*')
.pipe(newer(out));
//minify production code
if(!devBuild){
page = page.pipe(htmlclean());
}
return page.pipe(gulp.dest(out))
.pipe(browserSync.stream());
});
// JS processing
gulp.task('js', function(){
var out = folder.dist + 'scripts/';
return gulp.src(folder.src + 'scripts/**/*')
.pipe(newer(out))
.pipe(uglify())
.pipe(gulp.dest(out))
.pipe(browserSync.stream());
});
//CSS processing
gulp.task('css', ['images'], function(){
var postCssOpts = [
assets({ loadPaths: ['images/'] }),
autoprefixer({ browsers: ['last 2 versions', '>2%'] }),
mqpacker
];
if(!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src(folder.src + 'styles/scss/main.scss')
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(gulp.dest(folder.dist + 'styles/'))
.pipe(browserSync.stream());
});
gulp.task('run', ['html', 'css', 'js']);
// watch for changes
gulp.task('watch',['browserSync', 'css'], function() {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// html changes
gulp.watch(folder.src + 'html/**/*', ['html']);
// javascript changes
gulp.watch(folder.src + 'js/**/*', ['js']);
// css changes
gulp.watch(folder.src + 'css/scss/**/*', ['css']);
});
gulp.task('default', ['browserSync','run', 'watch'])
gulp.task('browserSync', function(){
browserSync.init({
server:{
baseDir:'dist',
directory: true
}
})
});
This is my gulpfile.js
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify'); // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var livereload = require('gulp-livereload');
var sass = require('gulp-sass');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
scss: [
'node_modules/font-awesome/scss/font-awesome.scss',
'./src/scss/default.scss'
],
sassBuilds: './src/builds/css/',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./src/builds/css/*.css'
],
fonts:[
'node_modules/font-awesome/fonts/**.*'
],
dist: './dist',
mainJs: './src/main.js'
}
}
//Start my local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function() {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/', app: 'Chrome'}));
});
gulp.task('livereload', function (){
gulp.src('./src/**/*')
.pipe(connect.reload());
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('js', function() {
browserify(config.paths.mainJs)
.transform(reactify) //this would 'bundle' the JSX
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('css', function() {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'));
});
gulp.task('lint', function() {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html', 'livereload']);
gulp.watch(config.paths.scss, ['sass', 'livereload']);
gulp.watch(config.paths.js, ['js', 'lint']);
});
gulp.task('sass', function () {
return gulp.src(config.paths.scss)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(config.paths.sassBuilds));
});
gulp.task('icons', function() {
return gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/fonts'));
});
gulp.task('default', ['html', 'sass', 'js', 'lint', 'css', 'icons', 'open', 'watch']);
sass task first runs to create 2 css files into builds/css/
After that css task runs and should concat all css files from the config.paths.css but it doesn't, only watch task does and barely, sometimes it does, sometimes it doesn't (seriously). I feel there is some spaghetti going on here.
If you are expecting that the sass task will always finish before the css task starts Don't. From the gulp documentation
Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.
The usual way to fix this is to make the css task wait for the sass task to finish by:
gulp.task('css', ['sass'], function() {
I am writting a gulp tasks where I take several js file , concat them , minify those.. same with scss into css etc ...normal stuffs
And, it is for Drupal 8
Here is my gulpfile. However on running this, I keep on getting the following error:
[10:00:58] Starting 'scripts'...
events.js:160
throw er; // Unhandled 'error' event
^
RangeError: Maximum call stack size exceeded
at Object.TreeWalker._visit (eval at <anonymous> (/Applications/MAMP/htdocs/novaent/node_modules/uglify-js/tools/node.js:1:0), <anonymous>:1255:21)
'use strict';
And below is my gulp file
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// sassOptions are optional but things like sourceComments (line_comments) can be pretty handy.
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// javaScripts
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('index.js'))
.pipe(gulp.dest(config.js.dest)) // outputs *.js without min
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(config.js.dest)) // outputs *.js.min
.pipe(notify({message: 'Rebuild all custom scripts'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);
I think I have solved it as below
'use strict';
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
var uglifyOptions = {
preserveComments: 'license',
warnings: 'true'
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// Concat all js files into one index.min.js file
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('./js/index.js'))
.pipe(gulp.dest('./js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify(uglifyOptions))
.pipe(gulp.dest('./assets/dist/'))
.pipe(notify({message: 'Rebuild all custom scripts. Please refresh your browser'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'scripts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);
I'm trying to require a file with a variable in the path. Something like
const langCode = this.props.langCode; // en
let languageFile = require('../common/languages/' + langCode);
Where langCode can be fr, en, de, nl. Thus what I'm trying to get is for example
require('../common/languages/en');
When I type it without variable at the end, thus require('../common/languages/en'); it works good. But when I try with require('../common/languages/' + langCode); it won't work, doesn't matter that the value of the langCode is also en.
I get next error :
bundle.js:1 Uncaught Error: Cannot find module '../common/languages/en'
UPDATE
'use strict';
var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");
var config = {
port: 8001,
devBaseUrl: 'http://localhost',
paths: {
html: "./src/*.html",
externals: "./src/assets/externals/*.js",
js: "./src/**/*.js",
images: './src/assets/images/**/*',
fonts: './src/assets/css/fonts/*',
css: [
"./src/assets/css/*.css",
"./node_modules/toastr/package/toastr.css"
],
sass: './src/assets/css/*.scss',
dist: "./dist",
mainJS: "./src/main.js"
}
};
gulp.task('connect', ['watch'], function () {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
fallback: './dist/index.html'
})
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});
gulp.task('html', function () {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('externals', function () {
gulp.src(config.paths.externals)
.on('error', console.error.bind(console))
.pipe(concat('external.js'))
.pipe(gulp.dest(config.paths.dist + '/externals'))
.pipe(connect.reload());
});
gulp.task('js', function () {
browserify(config.paths.mainJS)
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('images', function () {
gulp.src(config.paths.images)
.pipe(gulp.dest(config.paths.dist + '/images'));
});
gulp.task('styles', function () {
var cssStyles = gulp.src(config.paths.css)
.pipe(concat('styles.css'));
var sassStyles = gulp.src(config.paths.sass)
.pipe(sass())
.pipe(concat('styles.scss'));
var mergedStream = merge(cssStyles, sassStyles)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
.pipe(connect.reload());
return mergedStream;
});
gulp.task('fonts', function () {
gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format());
});
gulp.task('watch', function () {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.externals, ['externals', 'lint']);
gulp.watch([config.paths.css, config.paths.sass], ['styles']);
gulp.watch(config.paths.images, ['images']);
});
gulp.task('default', ['html', 'js', 'styles', 'externals', 'images', 'fonts', 'lint', 'open', 'watch']);
Most of JS bundlers cannot handle dynamic require mechanism.
Try to load all languages and switch them in runtime
let languages = {
en: require('../common/languages/en'),
ru: require('../common/languages/ru'),
de: require('../common/languages/de')
}
const langCode = this.props.langCode; // en
let languageFile = languages[langCode];
Are you using webpack as your bundler?
If so you need to be aware of it's dynamic requires mechanism.
Here is an issue that discusses it.
in your express.js server, set up a static directory containing any static.file:
const express = require('express')
const app = express()
app.use(express.static(path.join(__dirname, '../path_to/..', staticImages)))
react native component:
return <Image source={{ uri: `http://192.168.0.1:3345/${'staticImage.jpg'}`}} />