具有UI Grid的JHipster Docker Build不显示字体

Question

I am using JHipster 3.8 with UI-Grid ie ui-grid.info when i run the application locally its working fine. But when i deploy to Docker using this command

./gradlew bootRepackage -Pprod buildDocker

docker-compose -f src/main/docker/app.yml up

i can see below error in developer console regarding fonts

generated.js:174220 GET http://192.168.99.100:8585/content/css/ui-grid-f53764c7a4.woff
GET http://192.168.99.100:8585/content/css/ui-grid-c6fa199a3e.ttf 

and the page display with some character instead of icon as below :-

i have got couple solution for UI Grid link1 link2 , but its not working for me, because as per the error file name and location are different, as gulp making such changes.

Not sure how to fix this issue. Can some once guide me?

EDIT

My Gulp File:-

// Generated on 2016-09-20 using generator-jhipster 3.7.1
'use strict';

var gulp = require('gulp'),
    expect = require('gulp-expect-file'),
    es = require('event-stream'),
    flatten = require('gulp-flatten'),
    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'),
    rename = require('gulp-rename'),
    eslint = require('gulp-eslint'),
    argv = require('yargs').argv,
    gutil = require('gulp-util'),
    protractor = require('gulp-protractor').protractor,
    del = require('del'),
    runSequence = require('run-sequence'),
    browserSync = require('browser-sync'),
    KarmaServer = require('karma').Server,
    plumber = require('gulp-plumber'),
    changed = require('gulp-changed'),
    gulpIf = require('gulp-if');

var handleErrors = require('./gulp/handle-errors'),
    serve = require('./gulp/serve'),
    util = require('./gulp/utils'),
    copy = require('./gulp/copy'),
    inject = require('./gulp/inject'),
    build = require('./gulp/build');

var config = require('./gulp/config');

gulp.task('clean', function () {
    return del([config.dist], { dot: true });
});

gulp.task('copy', ['copy:i18n', 'copy:fonts', 'copy:common']);

gulp.task('copy:i18n', copy.i18n);

gulp.task('copy:languages', copy.languages);

gulp.task('copy:fonts', copy.fonts);

gulp.task('copy:common', copy.common);

gulp.task('copy:swagger', copy.swagger);

gulp.task('copy:images', copy.images);

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('copyAngularUiGridFonts', function() {
       gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
       .pipe(gulp.dest(config.dist + 'content/css/'));
    });

gulp.task('styles', ['sass'], function () {
    return gulp.src(config.app + 'content/css')
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('inject', function() {
    runSequence('inject:dep', 'inject:app');
});

gulp.task('inject:dep', ['inject:test', 'inject:vendor']);

gulp.task('inject:app', inject.app);

gulp.task('inject:vendor', inject.vendor);

gulp.task('inject:test', inject.test);

gulp.task('inject:troubleshoot', inject.troubleshoot);

gulp.task('assets:prod', ['images', 'styles', 'html', 'copy:swagger', 'copy:images'], build);

gulp.task('html', function () {
    return gulp.src(config.app + 'app/**/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(templateCache({
            module: 'dashboardApp',
            root: 'app/',
            moduleSystem: 'IIFE'
        }))
        .pipe(gulp.dest(config.tmp));
});

gulp.task('ngconstant:dev', function () {
    return ngConstant({
        name: 'dashboardApp',
        constants: {
            VERSION: util.parseVersion(),
            DEBUG_INFO_ENABLED: true
        },
        template: config.constantTemplate,
        stream: true
    })
    .pipe(rename('app.constants.js'))
    .pipe(gulp.dest(config.app + 'app/'));
});

gulp.task('ngconstant:prod', function () {
    return ngConstant({
        name: 'dashboardApp',
        constants: {
            VERSION: util.parseVersion(),
            DEBUG_INFO_ENABLED: false
        },
        template: config.constantTemplate,
        stream: true
    })
    .pipe(rename('app.constants.js'))
    .pipe(gulp.dest(config.app + 'app/'));
});

/*gulp.task('fonts:prod', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter(config.bower + 'angular-ui-grid/*.{eot,svg,ttf,woff,woff2}'))
      .pipe($.flatten())
      .pipe(gulp.dest(options.tmp + 'content/css/'));
  });*/

// 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', ['inject:test', 'ngconstant:dev'], function (done) {
    new KarmaServer({
        configFile: __dirname + '/' + config.test + 'karma.conf.js',
        singleRun: true
    }, done).start();
});

/* to run individual suites pass `gulp itest --suite suiteName` */
gulp.task('protractor', function () {
    var configObj = {
        configFile: config.test + 'protractor.conf.js'
    };
    if (argv.suite) {
        configObj['args'] = ['--suite', argv.suite];
    }
    return gulp.src([])
        .pipe(plumber({errorHandler: handleErrors}))
        .pipe(protractor(configObj))
        .on('error', function () {
            gutil.log('E2E Tests failed');
            process.exit(1);
        });
});

gulp.task('itest', ['protractor']);

gulp.task('watch', function () {
    gulp.watch('bower.json', ['install']);
    gulp.watch(['gulpfile.js', 'build.gradle'], ['ngconstant:dev']);
    gulp.watch(config.sassSrc, ['styles']);
    gulp.watch(config.app + 'content/images/**', ['images']);
    gulp.watch(config.app + 'app/**/*.js', ['inject:app']);
    gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});

gulp.task('install', function () {
    runSequence(['inject:dep', 'ngconstant:dev'], 'sass', 'copy:languages', 'inject:app', 'inject:troubleshoot');
});

gulp.task('serve', ['install'], serve);

gulp.task('build', ['clean'], function (cb) {
    runSequence(['copy','copyAngularUiGridFonts', 'inject:vendor', 'ngconstant:prod', 'copy:languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});

gulp.task('default', ['serve']);

EDIT:-

buildscript {
    repositories {
        mavenLocal()
        mavenCentral()
        jcenter()
        maven { url "http://repo.spring.io/plugins-release" }
        maven { url "http://repo.spring.io/milestone" }
        maven { url "https://plugins.gradle.org/m2/" }
    }
    dependencies {
        classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:2.0.1"
        classpath "net.ltgt.gradle:gradle-apt-plugin:0.6"
        classpath "org.springframework.boot:spring-boot-gradle-plugin:${spring_boot_version}"
        classpath "org.springframework.build.gradle:propdeps-plugin:0.0.7"
        classpath "com.moowork.gradle:gradle-node-plugin:0.12"
        classpath "com.moowork.gradle:gradle-gulp-plugin:0.12"
        classpath "se.transmode.gradle:gradle-docker:1.2"
        classpath "io.spring.gradle:dependency-management-plugin:0.5.6.RELEASE"
        //jhipster-needle-gradle-buildscript-dependency - JHipster will add additional gradle build script plugins here
    }
}

apply plugin: 'java'
sourceCompatibility=1.8
targetCompatibility=1.8
apply plugin: 'maven'
apply plugin: 'spring-boot'
apply plugin: 'war'
apply plugin: 'propdeps'
apply plugin: 'io.spring.dependency-management'
/* downgrade Hibernate to 4.3 */
ext['hibernate.version'] = '${hibernate_entitymanager_version}'
defaultTasks 'bootRun'


sourceSets {
    generated {
        java {
            srcDirs = ['src/main/generated']
        }
    }
} 

bootRepackage {
   mainClass = 'com.equidity.dashboard.XboardApp'
}

war {

}

springBoot {
    mainClass = 'com.equidity.dashboard.XboardApp'
    executable = true
    buildInfo()
}

bootRun {
    addResources = false
}

apply from: 'gradle/yeoman.gradle'
apply from: 'gradle/sonar.gradle'

apply from: 'gradle/liquibase.gradle'

apply from: 'gradle/gatling.gradle'
apply from: 'gradle/mapstruct.gradle'
apply from: 'gradle/docker.gradle'
//jhipster-needle-gradle-apply-from - JHipster will add additional gradle scripts to be applied here

if (project.hasProperty('prod')) {
    apply from: 'gradle/profile_prod.gradle'
} else {
    apply from: 'gradle/profile_dev.gradle'
}

group = 'com.equidity.dashboard'
version = '0.0.1-SNAPSHOT'

description = ''

configurations {
    providedRuntime
    compile.exclude module: "spring-boot-starter-tomcat"
}

repositories {
    mavenLocal()
    mavenCentral()
    jcenter()
    maven { url 'http://repo.spring.io/milestone' }
    maven { url 'http://repo.spring.io/snapshot' }
    maven { url 'https://repository.jboss.org/nexus/content/repositories/releases' }
    maven { url 'https://oss.sonatype.org/content/repositories/releases' }
    maven { url 'https://oss.sonatype.org/content/repositories/snapshots' }
    maven { url 'http://repo.maven.apache.org/maven2' }
}

dependencies {
    compile "io.dropwizard.metrics:metrics-core"
    compile "io.dropwizard.metrics:metrics-graphite:${dropwizard_metrics_version}"
    compile "io.dropwizard.metrics:metrics-healthchecks:${dropwizard_metrics_version}"
    compile "io.dropwizard.metrics:metrics-jvm:${dropwizard_metrics_version}"
    compile "io.dropwizard.metrics:metrics-servlet:${dropwizard_metrics_version}"
    compile "io.dropwizard.metrics:metrics-json:${dropwizard_metrics_version}"
    compile ("io.dropwizard.metrics:metrics-servlets:${dropwizard_metrics_version}") {
        exclude(module: 'metrics-healthchecks')
    }
    compile("net.logstash.logback:logstash-logback-encoder:${logstash_logback_encoder_version}") {
        exclude(module: 'ch.qos.logback')
    }
    compile "com.fasterxml.jackson.datatype:jackson-datatype-json-org:${jackson_version}"
    compile "com.fasterxml.jackson.datatype:jackson-datatype-hppc:${jackson_version}"
    compile "com.fasterxml.jackson.datatype:jackson-datatype-jsr310:${jackson_version}"
    compile "com.fasterxml.jackson.datatype:jackson-datatype-hibernate4"
    compile "com.fasterxml.jackson.core:jackson-annotations:${jackson_version}"
    compile "com.fasterxml.jackson.core:jackson-databind:${jackson_version}"
    compile ("com.ryantenney.metrics:metrics-spring:${metrics_spring_version}") {
        exclude(module: 'metrics-core')
        exclude(module: 'metrics-healthchecks')
    } 
    compile "com.hazelcast:hazelcast:${hazelcast_version}"
    compile "com.hazelcast:hazelcast-hibernate4:${hazelcast_version}"
    compile "com.hazelcast:hazelcast-spring:${hazelcast_version}"
    compile "com.hazelcast:hazelcast-wm:${hazelcast_version}"
    compile "org.hibernate:hibernate-core:${hibernate_entitymanager_version}"
    compile("com.zaxxer:HikariCP:${HikariCP_version}") {
        exclude(module: 'tools')
    }
    compile "org.apache.commons:commons-lang3:${commons_lang_version}"
    compile "commons-io:commons-io:${commons_io_version}"
    compile "javax.inject:javax.inject:${javax_inject_version}"
    compile "javax.transaction:javax.transaction-api"
    compile "org.apache.geronimo.javamail:geronimo-javamail_1.4_mail:${geronimo_javamail_1_4_mail_version}"

    compile "org.hibernate:hibernate-envers"
    compile "org.hibernate:hibernate-validator"
    compile ("org.liquibase:liquibase-core:${liquibase_core_version}") {
        exclude(module: 'jetty-servlet')
    }
    compile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
    compile "org.springframework.boot:spring-boot-actuator"
    compile "org.springframework.boot:spring-boot-autoconfigure"
    compile "org.springframework.boot:spring-boot-loader-tools"
    compile "org.springframework.boot:spring-boot-starter-logging"
    compile "org.springframework.boot:spring-boot-starter-aop"
    compile "org.springframework.boot:spring-boot-starter-data-jpa"
    compile "org.springframework.boot:spring-boot-starter-data-elasticsearch"
    // needed to get around elasticsearch stacktrace about jna not found
    // https://github.com/elastic/elasticsearch/issues/13245
    compile "net.java.dev.jna:jna:${jna_version}"
    compile "org.springframework.boot:spring-boot-starter-security"
    compile ("org.springframework.boot:spring-boot-starter-web") {
        exclude module: 'spring-boot-starter-tomcat'
    }
    compile "org.springframework.boot:spring-boot-starter-undertow"
    compile "org.springframework.boot:spring-boot-starter-websocket"
    compile "org.springframework.boot:spring-boot-starter-thymeleaf"
    compile "org.springframework.cloud:spring-cloud-cloudfoundry-connector"
    compile "org.springframework.cloud:spring-cloud-spring-service-connector"
    compile "org.springframework.cloud:spring-cloud-localconfig-connector"
    compile ("org.springframework:spring-context-support") {
        exclude(module: 'quartz')
    }
    compile "org.springframework.security:spring-security-config:${spring_security_version}"
    compile "org.springframework.security:spring-security-data:${spring_security_version}"
    compile "org.springframework.security:spring-security-web:${spring_security_version}"
    compile "org.springframework.security:spring-security-messaging:${spring_security_version}" 
    compile("io.springfox:springfox-swagger2:${springfox_version}"){
        exclude module: 'mapstruct'
    }
    compile "mysql:mysql-connector-java"
    compile "fr.ippon.spark.metrics:metrics-spark-reporter:${metrics_spark_reporter_version}"
    compile "org.mapstruct:mapstruct-jdk8:${mapstruct_version}"
    compile "org.apache.httpcomponents:httpclient"
    compile "org.springframework.social:spring-social-security"
    compile "org.springframework.social:spring-social-google:${spring_social_google_version}"
    compile "org.springframework.social:spring-social-facebook"
    compile "org.springframework.social:spring-social-twitter"
    testCompile "com.jayway.awaitility:awaitility:${awaility_version}"
    testCompile "com.jayway.jsonpath:json-path"
    testCompile "info.cukes:cucumber-junit:${cucumber_version}"
    testCompile "info.cukes:cucumber-spring:${cucumber_version}"
    testCompile "org.springframework.boot:spring-boot-starter-test"
    testCompile "org.springframework.security:spring-security-test"
    testCompile "org.springframework.boot:spring-boot-test"
    testCompile "org.assertj:assertj-core:${assertj_core_version}"
    testCompile "junit:junit"
    testCompile "org.mockito:mockito-core"
    testCompile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
    testCompile "org.hamcrest:hamcrest-library"

    testCompile "io.gatling.highcharts:gatling-charts-highcharts:${gatling_version}"

    testCompile "com.h2database:h2"
    optional "org.springframework.boot:spring-boot-configuration-processor:${spring_boot_version}"
    //jhipster-needle-gradle-dependency - JHipster will add additional dependencies here

    compile "com.querydsl:querydsl-core:${queryDslVersion}"
    compile "com.querydsl:querydsl-jpa:${queryDslVersion}"
    compile "com.querydsl:querydsl-apt:${queryDslVersion}"
    querydslapt "com.querydsl:querydsl-apt:${queryDslVersion}"

}
clean {
    delete "target"
}

task cleanResources(type: Delete) {
    delete 'build/resources'
}

task wrapper(type: Wrapper) {
    gradleVersion = '3.1'
}

task stage(dependsOn: 'bootRepackage') {
}


compileJava.dependsOn processResources
processResources.dependsOn cleanResources,bootBuildInfo
bootBuildInfo.mustRunAfter cleanResources

EDIT :- Profile_prod.gradle

import org.apache.tools.ant.taskdefs.condition.Os
apply plugin: 'spring-boot'
apply plugin: 'com.moowork.node'
apply plugin: 'com.moowork.gulp'


ext {
    logbackLoglevel = "INFO"
}

dependencies {

}

def profiles = 'prod'
if (project.hasProperty('no-liquibase')) {
    profiles += ',no-liquibase'
}

if (project.hasProperty('swagger')) {
    profiles += ',swagger'
}

bootRun {
    args = []
}

task gulpBuildWithOpts(type: GulpTask) {
    args = ["build", "--no-notification"]
}

war {
    webAppDirName = 'build/www/'
}

processResources {
    filesMatching('**/logback-spring.xml') {
        filter {
            it.replace('#logback.loglevel#', logbackLoglevel)
        }
    }
    filesMatching('**/application.yml') {
        filter {
            it.replace('#spring.profiles.active#', profiles)
        }
    }
}


gulpBuildWithOpts.dependsOn 'npmInstall'
gulpBuildWithOpts.dependsOn 'bower'
processResources.dependsOn gulpBuildWithOpts
test.dependsOn gulp_test
bootRun.dependsOn gulp_test

Answer 1

As described in in the links that you provided, you need a task in gulpfile.js which copy the missing files. You can use the following code to your existing copy task eg:

gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
    .pipe(plumber({errorHandler: handleErrors}))
    .pipe(changed(config.dist + 'content/css/'))
    .pipe(flatten())
    .pipe(rev())
    .pipe(gulp.dest(config.dist + 'content/css/'))
    .pipe(rev.manifest(config.revManifest, {
        base: config.dist,
        merge: true
    }))
    .pipe(gulp.dest(config.dist)),

ie your copy task is gone look like this:

gulp.task('copy', function () {
return es.merge(
    gulp.src(config.app + 'i18n/**')
    .pipe(plumber({errorHandler: handleErrors}))
    .pipe(changed(config.dist + 'i18n/'))
    .pipe(gulp.dest(config.dist + 'i18n/')),
    gulp.src(config.bower + 'bootstrap/fonts/*.*')
    .pipe(plumber({errorHandler: handleErrors}))
    .pipe(changed(config.dist + 'content/fonts/'))
    .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 + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
    .pipe(plumber({errorHandler: handleErrors}))
    .pipe(changed(config.dist + 'content/css/'))
    .pipe(flatten())
    .pipe(rev())
    .pipe(gulp.dest(config.dist + 'content/css/'))
    .pipe(rev.manifest(config.revManifest, {
        base: config.dist,
        merge: true
    }))
    .pipe(gulp.dest(config.dist)),
    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))
);

});

Its looks like angular-grid-ui is expecting the *.{ttf,woff,eof,svg} files to be found under the content/css and not content/fonts