这是一个不久前正在构建和正常工作的继承项目，现在已停止注入app-xxxxxxxx.js和vendor-xxxxxxxx.js脚本标记。相反，它会注入＆gt; 100 ../bower_components/xxx和app / xxx脚本标记，这些标记在已发布的应用程序中无法正常工作。正在正确创建app.js和vendor.js缩小文件。另外两个开发人员正在研究这个项目，其中一个保留了旧的正确行为，另一个正在遇到我所描述的相同问题，但是gulp和index文件是相同的。我吞咽的经验有限。如何确定错误并将缩小的文件注入index.html？ 以下是我的gulp build＆＃39;文件和index.html中的build-comment标记。
吞/ build.js
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
gulp.task('partials', function ()
{
return gulp.src([
path.join(conf.paths.src, '/app/**/*.html'),
path.join(conf.paths.tmp, '/serve/app/**/*.html')
])
.pipe($.htmlmin({
collapseWhitespace: true,
maxLineLength : 120,
removeComments : true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'fuse',
root : 'app'
}))
.pipe(gulp.dest(conf.paths.tmp + '/partials/'));
});
gulp.task('html', ['inject', 'partials'], function ()
{
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), {read: false});
var partialsInjectOptions = {
starttag : '<!-- inject:partials -->',
ignorePath : path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var cssFilter = $.filter('**/*.css', {restore: true});
var jsFilter = $.filter('**/*.js', {restore: true});
var htmlFilter = $.filter('*.html', {restore: true});
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe(cssFilter)
.pipe($.sourcemaps.init())
.pipe($.cssnano())
.pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
.pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.htmlmin({
collapseWhitespace: true,
maxLineLength : 120,
removeComments : true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({
title : path.join(conf.paths.dist, '/'),
showFiles: true
}));
});
// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function ()
{
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));
//.pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});
gulp.task('other', function ()
{
var fileFilter = $.filter(function (file)
{
return file.stat.isFile();
});
return gulp.src([
path.join(conf.paths.src, '/**/*'),
path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
])
.pipe(fileFilter)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});
gulp.task('clean', function ()
{
return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]);
});
gulp.task('build', ['html', 'fonts', 'other']);
吞/ inject.js
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var _ = require('lodash');
var browserSync = require('browser-sync');
gulp.task('inject-reload', ['inject'], function ()
{
browserSync.reload();
});
gulp.task('inject', ['scripts', 'styles'], function ()
{
var injectStyles = gulp.src([
path.join(conf.paths.tmp, '/serve/app/**/*.css'),
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
], {read: false});
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
])
.pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath : [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
addRootSlash: false
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});
index.html代码段
<div id="main" class="animate-slide-up" ui-view="main" layout="column"></div>
<!--<ms-theme-options></ms-theme-options>-->
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
从构建中记录...
[13:48:43] Starting 'scripts'...
[13:48:43] Starting 'styles'...
[13:48:44] Starting 'partials'...
[13:48:44] Starting 'fonts'...
[13:48:44] Starting 'other'...
[13:48:46] gulp-inject 57 files into index.scss.
[13:48:47] Finished 'fonts' after 2.48 s
[13:48:56] Finished 'styles' after 13 s
[13:48:57] all files 3.67 MB
[13:48:57] Finished 'scripts' after 14 s
[13:48:57] Starting 'inject'...
injectOptions { ignorePath: [ 'src', '.tmp\\serve' ], addRootSlash: false }
[13:48:57] Finished 'partials' after 14 s
[13:48:57] gulp-inject 1 files into index.html.
[13:49:00] gulp-inject 347 files into index.html.
[13:49:00] Finished 'inject' after 2.82 s
[13:49:00] Starting 'html'...
[13:49:01] gulp-inject 1 files into index.html.
[13:49:02] Finished 'other' after 18 s
[13:50:04] dist\ maps\scripts\vendor-152deb66d8.js.map 10.03 MB
[13:50:35] dist\ maps\scripts\app-1c22f6e98b.js.map 6.43 MB
[13:50:35] dist\ index.html 36.51 kB
[13:50:35] dist\ styles\app.css 3.95 MB
[13:50:35] dist\ styles\vendor.css 183.07 kB
[13:50:36] dist\ scripts\vendor-152deb66d8.js 2.31 MB
[13:50:36] dist\ scripts\app-1c22f6e98b.js 2.49 MB
[13:50:36] dist\ all files 25.44 MB
[13:50:36] Finished 'html' after 1.6 min
[13:50:36] Starting 'build'...
[13:50:36] Finished 'build' after 67 μs