ngConstant:dev returns null - javascript

I'm almost there with a jhipster generated app that I'm upgrading from v3.0.0 to v4.11, but I've been banging my head against a wall with gulp for almost a whole day now
When running serve/build tasks it seems to have an error when generating the environment from the ngconstant task.
If I understand right, gulp will run the task serve or build and then call the run-sequence, which should go to the ngconstant task and generate the contents for app.constants.js.
Well, it seems to fail when trying to pick up the name of the environment from ngconstant, here's the error:
[11:08:29] 'ngconstant:dev' errored after 37 ms
[11:08:29] Error in plugin 'gulp-tslint-log'
TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
[11:08:29] Starting 'watch'...
[11:08:29] Finished 'watch' after 147 ms
[11:08:29] Error in plugin 'run-sequence(ngconstant:dev)'
Message:
TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
Stack:
Error: TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.dirname (path.js:1324:5)
at getFilePath (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:95:27)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:60:25)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
at pluginError (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:99:12)
at DestroyableTransform.objectStream [as _transform] (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:65:33)
at DestroyableTransform.Transform._read (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at DestroyableTransform.Writable.end (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/node_modules/readable-stream/lib/_stream_writable.js:352:10)
at ngConstantPlugin (/home/steven/Desktop/Upgraded_MQ/node_modules/gulp-ng-constant-fork/index.js:33:16)
at Gulp.<anonymous> (/home/steven/Desktop/Upgraded_MQ/gulpfile.js:162:12)
at module.exports (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/steven/Desktop/Upgraded_MQ/node_modules/orchestrator/index.js:134:8)
at runNextSet (/home/steven/Desktop/Upgraded_MQ/node_modules/run-sequence/index.js:86:16)
at runSequence (/home/steven/Desktop/Upgraded_MQ/node_modules/run-sequence/index.js:97:2)
My gulpfile.js:
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant-fork'),
eslint = require('gulp-eslint'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
del = require('del'),
wiredep = require('wiredep').stream,
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if'),
inject = require('gulp-inject'),
angularFilesort = require('gulp-angular-filesort');
var handleErrors = require('./gulp/handleErrors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', function () {
return es.merge(
gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src([config.app + 'robots.txt', config.app + 'favicon.ico', config.app + '.htaccess'], { dot: true })
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist))
.pipe(gulp.dest(config.dist))
);
});
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function () {
return gulp.src(config.app + 'index.html')
.pipe(inject(gulp.src(config.app + 'app/**/*.js').pipe(angularFilesort()), {relative: true}))
.pipe(gulp.dest(config.app));
});
gulp.task('wiredep', ['wiredep:test', 'wiredep:app']);
gulp.task('wiredep:app', function () {
var stream = gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [
/angular-i18n/, // localizations are loaded dynamically
'bower_components/bootstrap-sass/assets/javascripts/' // Exclude Bootstrap js files as we use ui-bootstrap
]
}))
.pipe(gulp.dest(config.app));
return es.merge(stream, gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
ignorePath: /\.\.\/webapp\/bower_components\// // remove ../webapp/bower_components/ from paths of injected sass files
}))
.pipe(gulp.dest(config.scss)));
});
gulp.task('wiredep:test', function () {
return gulp.src(config.test + 'karma.conf.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(wiredep({
exclude: [
/angular-i18n/, // localizations are loaded dynamically
/angular-scenario/,
'bower_components/bootstrap-sass/assets/javascripts/' // Exclude Bootstrap js files as we use ui-bootstrap
],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected JavaScript files
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'src/{{filePath}}\','
}
}
}
}))
.pipe(gulp.dest(config.test));
});
gulp.task('assets:prod', ['images', 'styles', 'html'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'drugQualityDataManagerApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'drugQualityDataManagerApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap:
'(function () {\n' +
' "use strict";\n' +
' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' +
' {%= __ngModule %}\n' +
'})();\n',
constants: {
ENV: 'dev',
VERSION: util.parseVersion()
}
})
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
dest: 'app.constants.js',
name: 'drugQualityDataManagerApp',
deps: false,
noFile: true,
interpolate: /\{%=(.+?)%\}/g,
wrap:
'(function () {\n' +
' "use strict";\n' +
' // DO NOT EDIT THIS FILE, EDIT THE GULP TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n' +
' {%= __ngModule %}\n' +
'})();\n',
constants: {
ENV: 'prod',
VERSION: util.parseVersion()
}
})
.pipe(gulp.dest(config.app + 'app/'));
});
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['wiredep:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'pom.xml'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['wiredep', 'ngconstant:dev'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app', 'ngconstant:prod'], 'inject', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
There's not much I have been able to try, I've basically been toying around with the differences between this gulp configuration and the pre-upgrade one, to find not many differences at all, and when changing, finding no positive results. I've also toyed around with the pom profile for deployment on server, no changes

So far, the only thing that lets the app build is to remove ngconstant calls from runSequence, leaving install, serve and build tasks like:
gulp.task('install', function () {
runSequence(['wiredep'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app'], 'inject', 'assets:prod', cb);
});
Where they used to be like:
gulp.task('install', function () {
runSequence(['wiredep', 'ngconstant:dev'], 'sass', 'inject');
});
gulp.task('serve', function () {
runSequence('install', serve);
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'wiredep:app', 'ngconstant:prod'], 'inject', 'assets:prod', cb);
});
This is far from an ideal workaround, but at least it keeps me on my feet, I would highly appreciate better recommendations for this

Related

Gulp error File not found with singular glob

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.

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object

There was a need to deploy an old project. Corrected gulpfile.js a bit so that the assembly started running, it came across an error:
[21:12:57] Finished 'html:build' after 71 ms
[21:12:57] Starting 'js:build'...
[21:12:57] 'js:build' errored after 15 ms
[21:12:57] TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer,
ArrayBuffer, Array, or Array-like Object. Received type undefined
at Function.from (buffer.js:207:11)
at new Buffer (buffer.js:182:17)
at G:\firststep\odc-client-app-2019-clean-html\node_modules\gulp-rigger\index.js:20:29
at Rigger.<anonymous> (G:\firststep\odc-client-app-2019-clean-
html\node_modules\rigger\index.js:719:9)
at Rigger.emit (events.js:182:13)
at Rigger.EventEmitter.emit (domain.js:441:20)
at G:\firststep\odc-client-app-2019-clean-html\node_modules\rigger\index.js:252:16
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:232:13
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:113:21
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:24:16
[21:12:57] 'build' errored after 87 ms
[21:12:57] 'default' errored after 89 ms
gulpfile.js:
'use strict';
var gulp = require('gulp'),
watch = require('gulp-watch'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
cssmin = require('gulp-cssmin'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rigger = require('gulp-rigger'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
connect = require('gulp-connect'),
opn = require('opn'),
notify = require('gulp-notify'),
copy = require('gulp-copy'),
plumber = require('gulp-plumber'),
less = require('fd-gulp-less');
var path = {
build: {
html: 'build/',
js: 'build/assets/sys/js/',
css: 'build/assets/sys/css/',
img: 'build/assets/sys/img/',
fonts: 'build/assets/sys/fonts/'
},
src: {
html: 'src/*.html',
js: 'src/js/main.js',
style: 'src/style/style.less',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
watch: {
html: 'src/**/*.html',
js: 'src/js/**/*.js',
style: 'src/style/**/*.less',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
clean: './build'
};
var server = {
host: 'localhost',
port: '1495'
};
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
gulp.task('webserver', function() {
connect.server({
host: server.host,
port: server.port,
livereload: true
});
});
gulp.task('webserver-stop', function() {
connect.server({
host: server.host,
port: server.port,
livereload: true
});
connect.serverClose();
});
gulp.task('openbrowser', function() {
opn( 'http://' + server.host + ':' + server.port + '/build' );
});
gulp.task('html:build', function () {
return gulp.src(path.src.html)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rigger())
.pipe(gulp.dest(path.build.html))
.pipe(notify('HTML: Done!'))
.pipe(connect.reload());
});
gulp.task('js:build', function () {
gulp.src(path.src.js)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rigger())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.js))
.pipe(notify('JS: Done!'))
.pipe(connect.reload());
});
gulp.task('style:build', function () {
gulp.src(path.src.style)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
// .pipe(sourcemaps.init())
.pipe(less())
.pipe(prefixer())
.pipe(cssmin())
// .pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css))
.pipe(notify('CSS: Done!'))
.pipe(connect.reload());
});
gulp.task('image:build', function () {
gulp.src(path.src.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}, {cleanupIDs: false}],
use: [pngquant()],
interlaced: true
}))
.pipe(gulp.dest(path.build.img))
.pipe(notify('IMG: Done!'))
.pipe(connect.reload());
});
gulp.task('fonts:build', function() {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts))
.pipe(notify('FONTS: Done!'));
});
gulp.task('build', gulp.series(
'html:build',
'js:build',
'style:build',
'fonts:build',
'image:build'
));
gulp.task('watch', function(){
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
watch([path.watch.style], function(event, cb) {
gulp.start('style:build');
});
watch([path.watch.js], function(event, cb) {
gulp.start('js:build');
});
watch([path.watch.img], function(event, cb) {
gulp.start('image:build');
});
watch([path.watch.fonts], function(event, cb) {
gulp.start('fonts:build');
});
});
gulp.task('default', gulp.series('build', 'webserver-stop', 'webserver', 'watch', 'openbrowser'));
gulp.task('start', gulp.series('build', 'webserver-stop', 'webserver', 'watch'));
gulp.task('stop', gulp.series('webserver-stop'));
//gulp.task('default', ['build', 'watch', 'openbrowser']);
I tried npm install jquery --save-dev because I found such tips in Google, but it didn’t help, and also tried bower install jquery --save-dev, because there is a bower in the project, but it also didn’t help. How do I fix an assembly?
sorry for bad eng.
i just had the same error. The source of error was gulp-rigger package. try to remove it and see if that works.
p.s. i replaced gulp-rigger with gulp-include
this error indicates about some error your files. the gulp-rigger can't find some files in your project. Since gulp-rigger wrote 'js:build', check paths to jquery, popper, and other includes in main.js. have you created main.js before gulp start?
The name of the directory where my project was located contained parentheses. I removed them and everything worked.

Error when running Gulp

I am setting up gulp for my project,and get this message when I run it.
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: EEXIST: file already exists, mkdir
'C:\Users\Theodosios\Desktop\AngularJs
\Week4\conFusion\dist\fonts'
at Error (native)
I am spending hours to see what's wrong,but I don't know what's happening. So here is my gulp code.
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}));
});
// Clean
gulp.task('clean', function () {
return del(['dist']), del(['../json-server/public'], {force: true});
});
// Default task
gulp.task('default', ['clean'], function () {
gulp.start('usemin', 'imagemin', 'copyfonts');
});
gulp.task('usemin', ['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css: [minifycss(), rev()],
js: [ngannotate(), uglify(), rev()]
}))
.pipe(gulp.dest('dist/'))
.pipe(gulp.dest('../json-server/public/'));
});
// Images
gulp.task('imagemin', function () {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true,
interlaced: true})))
.pipe(gulp.dest('dist/images')).pipe(gulp.dest('../json-
server/public/images'))
.pipe(notify({message: 'Images task complete'}));
});
gulp.task('copyfonts', ['clean'], function () {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts')).pipe(gulp.dest('../json-
server/public/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts')).pipe(gulp.dest('../json-
server/public/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function () {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',
['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
Any ideas? There is something wrong in one the pipes of node stream,but can't see where is the error.

Why is gulp complaining about Maximum call stack size exceeded?

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']);

Require file with a variable in React JS

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'}`}} />

Categories