所以我按照我想要的方式工作，主要是因为一旦我运行了gulp copy＆＃39;，我的index.html路径保持原样。但是，当运行gulp副本时，它会运行几个任务，并将目标发送到＆＃39; / dist /....＆＃39;。这是一个问题，因为我的开发环境不同。一直在搜索和搜索，并考虑如何实现像gulp-inject这样的东西，但不确定最好的方法来考虑我的文件结构，如下所示。下面我包括我的gulp.js和我的index.html。希望有人可以帮助解决这个问题。
gulp.js：
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var mainBowerFiles = require('main-bower-files');
var connect = require('gulp-connect');
var open = require('gulp-open');
// var imagemin = require('gulp-imagemin');
// var pngquant = require('imagemin-pngquant');
var bases = {
app: 'app/',
dist: 'dist/',
};
var paths = {
scripts: ['ppt/scripts/**/*.js'],
styles: ['ppt/styles/**/*.css'],
html: ['ppt/views/**/*.html'],
assets: ['ppt/assets/**/*.png', 'ppt/assets/**/*.svg'],
extras: ['index.html', '404.html', 'robots.txt', 'favicon.ico'],
};
gulp.task('connect', function () {
connect.server({
root: '.',
port: 9000,
// livereload: true,
open: {
browser: 'chrome'
}
});
});
gulp.task('open', function(){
gulp.src('./index.html')
.pipe(open());
});
gulp.task('bower', function() {
// mainBowerFiles is used as a src for the task,
// usually you pipe stuff through a task
return gulp.src(mainBowerFiles())
// Then pipe it to wanted directory, I use
// dist/lib but it could be anything really
.pipe(gulp.dest('dist/lib'))
});
// Delete the dist directory
gulp.task('clean', function() {
return gulp.src(bases.dist).pipe(clean());
});
// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(uglify()).pipe(concat('app.min.js')).pipe(gulp.dest(bases.dist + 'scripts/'));
});
// Imagemin images and ouput them in dist
// gulp.task('imagemin', ['clean'], function() {
// gulp.src(paths.images, {
// cwd: bases.app
// }).pipe(imagemin()).pipe(gulp.dest(bases.dist + 'assets/'));
// });
// Copy all other files to dist directly
gulp.task('copy', ['clean', 'scripts', 'bower'], function() {
// Copy html
gulp.src(paths.html, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'views'));
// Copy styles
gulp.src(paths.styles, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'styles'));
//Copy assets
gulp.src(paths.assets, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'assets'));
// Copy app scripts
// gulp.src(paths.scripts, {
// cwd: bases.app
// }).pipe(gulp.dest(bases.dist + 'scripts'));
// Copy extra html5bp files
gulp.src(paths.extras, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist));
});
// Process scripts and concatenate them into one output file
gulp.task('scriptstrip', function() {
gulp.src(paths.scripts, {cwd: bases.app})
// .pipe(jshint())
// .pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest(bases.dist + 'scripts/'));
});
// A development task to run anytime a file changes
gulp.task('watch', function() {
gulp.watch('app/**/*', ['scripts', 'copy']);
});
// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'copy']);
现在，我的index.html：
<!DOCTYPE html>
<html ng-app="fpsClientApp">
<head>
<meta name="keywords" content="flexible fsa hsa commuter health wellness medical dental benefits" />
<meta name="description" content="Navia Benefit Solutions" />
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
<title>Navia Benefit Solutions</title>
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/angular-loading-bar/build/loading-bar.css" rel="stylesheet" />
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.material.min.css" rel="stylesheet" />
<link href="ppt/styles/main.css" rel="stylesheet" />
<!-- fonts imported from Google fonts cdn -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div class="navbar navbar-inverse" role="navigation" ng-controller="indexController">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="#/pptHome"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
</div>
<div class="collapse navbar-collapse" collapse="!navbarExpanded">
<ul class="nav navbar-nav navbar-right">
<li ng-show="authentication.isAdmin"><a href="#/admin/ppt">admin</a></li>
<li><a href="https://www.naviabenefits.com/products-and-services/" target="_blank">products + services</a></li>
<li><a href="https://www.naviabenefits.com/about/" target="_blank">about us</a></li>`
<li><a href="https://www.naviabenefits.com/testimonials/" target="_blank">testimonials</a></li>
<li><a href="https://www.naviabenefits.com/careers/" target="_blank">careers</a></li>
<li><a href="https://www.naviabenefits.com/news/" target="_blank">news</a></li>
<li><a href="https://www.naviabenefits.com/blog/" target="_blank">blog</a></li>
<li><a href="https://www.naviabenefits.com/contact/" target="_blank">contact us</a></li>
<li ng-hide="!authentication.isAuth"><a id="signOut" href="" ng-click="logOut()">sign out <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbarSecondary navbar-inverse" role="navigation" ng-controller="indexController" ng-show="authentication.isAuth">
<div class="container">
<div ng-include="'ppt/views/menu.html'">
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
<div id="footer" role="navigation" ng-controller="indexController">
<div class="container">
<!-- <div class="navbar-header">
<a class="navbar-brand" href="#/pptHome"><img style="height: 37px;" src="ppt/assets/navia-icon.png" alt="Navia Logo"></a>
</div> -->
<div class="footerLinks">
<ul class="nav navbar-nav" style="padding-top: 5px;">
<img style="height: 37px; float: left; margin-top: 10px;" src="ppt/assets/navia-icon.png" alt="Navia Logo">
<li class="copyNavia"><a href="#">Navia © copyright 2016</a></li>
<li class="socialLinks"><a href="https://www.facebook.com/FlexPlanServices" target="_blank"><img src="ppt/assets/Facebook.png"></a></li>
<li class="socialLinks"><a href="https://twitter.com/FlexPlanService" target="_blank"><img src="ppt/assets/Twitter.png"></a></li>
<li class="socialLinks"><a href="https://www.youtube.com/user/FlexPlanServices" target="_blank"><img src="ppt/assets/YouTube.png"></a></li>
<li class="socialLinks"><a href="https://www.linkedin.com/company/102136?trk=tyah&trkInfo=clickedVertical%3Acompany%2Cidx%3A1-1-1%2CtarId%3A1437085282797%2Ctas%3Aflex%20plan%20services" target="_blank"><img src="ppt/assets/LinkedIn.png"></a></li>
<li class="naviaLinks"><a href="https://www.naviabenefits.com/about/" target="_blank">Feedback</a></li>
<li id="naviaSeperator" class="naviaLinks"><a href="">|</a></li>
<li class="naviaLinks"><a href="https://www.naviabenefits.com/testimonials/" target="_blank">Help</a></li>
<li id="naviaSeperator" class="naviaLinks"><a href="">|</a></li>
<li class="naviaLinks"><a href="https://www.naviabenefits.com/careers/" target="_blank">Privacy Policy</a></li>
<li id="naviaSeperator" class="naviaLinks"><a href="">|</a></li>
<li class="naviaLinks"><a href="https://www.naviabenefits.com/news/" target="_blank">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>
<!-- 3rd party libraries managed by Bower -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/kendo-ui/js/kendo.all.min.js"></script>
<script src="../bower_components/kendo-ui/js/jszip.min.js"></script>
<script src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="../bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="../bower_components/checklist-model/checklist-model.js"></script>
<script src="../bower_components/angular-validation-match/dist/angular-validation-match.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script> -->
<!-- Load app main script -->
<script src="ppt/scripts/app.js"></script>
<!-- Load services -->
<script src="ppt/scripts/services/authInterceptorService.js"></script>
<script src="ppt/scripts/services/authService.js"></script>
<script src="ppt/scripts/services/pptService.js"></script>
<script src="ppt/scripts/services/claimsService.js"></script>
<script src="ppt/scripts/services/swipesService.js"></script>
<script src="ppt/scripts/services/recurService.js"></script>
<script src="ppt/scripts/services/tokensManagerService.js"></script>
<script src="ppt/scripts/services/docsService.js"></script>
<script src="ppt/scripts/services/ordersService.js"></script>
<script src="ppt/scripts/services/errorService.js"></script>
<script src="ppt/scripts/services/utilsService.js"></script>
<script src="ppt/scripts/services/cardsService.js"></script>
<script src="ppt/scripts/services/mobileAppService.js"></script>
<script src="ppt/scripts/services/oeService.js"></script>
<script src="ppt/scripts/services/statementService.js"></script>
<script src="ppt/scripts/services/employeeService.js"></script>
<!-- Load controllers -->
<script src="ppt/scripts/controllers/indexController.js"></script>
<script src="ppt/scripts/controllers/infoController.js"></script>
<script src="ppt/scripts/controllers/homeController.js"></script>
<script src="ppt/scripts/controllers/pptController.js"></script>
<script src="ppt/scripts/controllers/pptProfileController.js"></script>
<script src="ppt/scripts/controllers/logreg/loginController.js"></script>
<script src="ppt/scripts/controllers/logreg/signupController.js"></script>
<script src="ppt/scripts/controllers/logreg/forgotController.js"></script>
<script src="ppt/scripts/controllers/logreg/pptERSuccessController.js"></script>
<script src="ppt/scripts/controllers/claims/swipeController.js"></script>
<script src="ppt/scripts/controllers/claims/claimsController.js"></script>
<script src="ppt/scripts/controllers/claims/claimReceiptController.js"></script>
<script src="ppt/scripts/controllers/claims/recurController.js"></script>
<script src="ppt/scripts/controllers/docs/docsController.js"></script>
<script src="ppt/scripts/controllers/orders/ordersController.js"></script>
<script src="ppt/scripts/controllers/orders/orderController.js"></script>
<script src="ppt/scripts/controllers/oe/onlineEnrollmentController.js"></script>
<script src="ppt/scripts/controllers/refreshController.js"></script>
<script src="ppt/scripts/controllers/tokensManagerController.js"></script>
<script src="ppt/scripts/controllers/associateController.js"></script>
<script src="ppt/scripts/controllers/cards/cardsController.js"></script>
<script src="ppt/scripts/controllers/mobileapp/mobileAppController.js"></script>
<script src="ppt/scripts/controllers/statementController.js"></script>
<script src="ppt/scripts/controllers/employee/employeeController.js"></script>
<script src="ppt/scripts/controllers/admin/adminController.js"></script>
<script src="ppt/scripts/controllers/logreg/ssoController.js"></script>
<!-- Load custom filters -->
<!-- Load custom directives -->
</body>
</html>
真的非常感谢帮助，因为我大部分时间都是因为我的大脑而绞尽脑汁。
答案 0 :(得分：0)
我强烈推荐wiredep。它会自动为您处理所有的bower依赖项，以及依赖项的顺序。以下是wiredep任务示例：
var wiredep = require('wiredep').stream;
gulp.task('wiredep', function () {
/// <summary>
/// Wires bower dependencies by inserting the css and js files used by the app.
/// The <!--bower:css--> and <!--bower:js--> tags followed by <!--endbower -->
/// indicating the insertion points.
/// </summary>
return gulp
.src("** Your index.html file path ***")
.pipe(wiredep("** Your bower folder path **"))
.pipe(gulp.dest("** Where you want your new index.html ***")); // it could be the same path
});
请注意，没有连接。
另外，我建议使用gulp-load-plugins。它会让你的生活更加轻松......更容易。