'gulp serve'コマンドは、index.htmlから添付のjavascriptファイルを削除します。

Question

私はSpringブート+ Angular JSアプリケーションを生成するためにJHipsterを使用しています。管理対象のパッケージにはBower、繰り返し可能なタスクを自動化するにはGulpが使用されます。私はindex.htmlにBootstrap jsを追加する必要があります。私は次のように手動でそれをやった：

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

私は問題に直面して、次の。 gulp serveコマンドを実行した後、ブートストラップjsの添付された定義をindex.htmlから削除します。なぜ私は思っています。

私はbower.jsonとgulpfile.jsを添付します：

`{ 
    "version": "0.0.0", 
    "name": "sykhivska", 
    "appPath": "src/main/webapp/", 
    "testPath": "src/test/javascript/spec", 
    "dependencies": { 
    "angular": "1.5.8", 
    "angular-aria": "1.5.8", 
    "angular-bootstrap": "1.3.3", 
    "angular-cache-buster": "0.4.3", 
    "angular-cookies": "1.5.8", 
    "ngstorage": "0.3.10", 
    "angular-loading-bar": "0.9.0", 
    "angular-resource": "1.5.8", 
    "angular-sanitize": "1.5.8", 
    "angular-ui-router": "0.3.1", 
    "bootstrap": "3.3.7", 
    "bootstrap-ui-datetime-picker": "2.4.3", 
    "jquery": "3.1.0", 
    "json3": "3.3.2", 
    "messageformat": "0.3.1", 
    "modernizr": "3.3.1", 
    "ng-file-upload": "12.0.4", 
    "ngInfiniteScroll": "1.3.0", 
    "swagger-ui": "2.1.5" 
    }, 
    "devDependencies": { 
    "angular-mocks": "1.5.8" 
    }, 
    "overrides": { 
    "angular": { 
     "dependencies": { 
     "jquery": "3.1.0" 
     } 
    }, 
    "angular-cache-buster": { 
     "dependencies": { 
     "angular": "1.5.8" 
     } 
    }, 
    "bootstrap": { 
     "main": [ 
     "dist/css/bootstrap.css" 
     ] 
    } 
    }, 
    "resolutions": { 
    "angular": "1.5.8", 
    "angular-bootstrap": "2.0.0", 
    "jquery": "3.1.0" 
    } 
}` 

// Generated on 2016-12-11 using generator-jhipster 3.12.1 
'use strict'; 

var gulp = require('gulp'), 
    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'), 
    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:fonts', 'copy:common']); 

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('styles', [], 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: 'sykhivskaApp', 
      root: 'app/', 
      moduleSystem: 'IIFE' 
     })) 
     .pipe(gulp.dest(config.tmp)); 
}); 

gulp.task('ngconstant:dev', function() { 
    return ngConstant({ 
     name: 'sykhivskaApp', 
     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: 'sykhivskaApp', 
     constants: { 
      VERSION: util.parseVersion(), 
      DEBUG_INFO_ENABLED: false 
     }, 
     template: config.constantTemplate, 
     stream: true 
    }) 
    .pipe(rename('app.constants.js')) 
    .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', ['inject: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.app + 'content/css/**/*.css', ['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'], 'inject:app', 'inject:troubleshoot'); 
}); 

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

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

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

Answer 1

ブートストラップは、そのmainプロパティでown bower.jsonでbootstrap.jsを宣言したようゴクゴクは、各依存関係が提供するbower.jsonファイルに基づいて、あなたのindex.htmlにバウアー依存関係を注入ので、これは正常ですそれは注入されるべきである。プロジェクトのbower.jsonmainプロパティでだから、どちらかあなたのoverrideに「DIST/JS/bootstrap.js」を追加したり、あなたのbower.jsonから完全にブートストラップオーバーライドを削除

"overrides": { "bootstrap": { "main": [ "dist/css/bootstrap.css" ]

を上書きされるので、あなたの場合はそうではありません。