我是GULP和BOWER的新人。 我在我的项目中使用GULP,ANGULARJS,BOWER。 但是gulp在html文件中创建并包含脚本链接,如下所示。
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/bootstrap.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
<script src="../bower_components/angular/angular.js"></script>
但我想这样
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
<script src="../bower_components/angular/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
我的bower.json文件代码
{
"name": "angular",
"version": "0.0.0",
"dependencies": {
"angular-animate": "1.4.8",
"angular-cookies": "~1.4.0",
"angular-touch": "~1.4.0",
"angular-sanitize": "~1.4.0",
"jquery": "~2.1.4",
"angular-ui-router": "~0.2.15",
"bootstrap": "~3.3.4",
"angular-bootstrap": "~0.12.0",
"malarkey": "yuanqing/malarkey#~1.3.0",
"toastr": "~2.1.1",
"moment": "~2.10.3",
"animate.css": "~3.3.0",
"angular": "~1.4.0",
"font-awsome": "~4.3.0",
"angular-resource": "~1.4.1",
"angular-google-maps": "~2.1.5",
"angular-toastr": "~1.4.1",
"ng-file-upload": "~5.0.9",
"angular-ui-select": "~0.9.8",
"ionicons": "~2.0.1",
"angular-ui-switch": "~0.1.0",
"ngDraggable": "~0.1.8",
"angular-slimscroll": "~1.1.3",
"angular-elastic": "~2.4.2",
"spectrum": "~1.7.0",
"jquery-ui": "~1.11.4",
"jplayer": "~2.9.2",
"angular-momentjs": "~0.2.2",
"ng-bs-daterangepicker": "~0.0.3",
"highcharts-ng": "~0.0.8",
"highcharts": "~4.1.7",
"angular-datatables": "~0.4.3",
"datatables-responsive": "~1.0.6",
"masonry": "~3.3.1",
"angular-google-places-autocomplete":"0.2.7",
"angular-material":"0.10.1",
"angular-messages":"1.4.5-build.4192+sha.ea8016c",
"linea-io":"1.0.0",
"ng-csv":"0.3.4",
"angular-summernote":"0.8.1"
},
"devDependencies": {
"angular-mocks": "~1.4.0"
},
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
},
"resolutions": {
"jquery": "~2.1.4",
"angular": "~1.4.0"
}
}
my gulp server.js
'use strict';
var gulp = require('gulp');
var util = require('util');
var conf = require('./conf');
var path = require('path');
var connect = require('gulp-connect');
module.exports = function(options) {
function createServerTask(name, pre, root) {
gulp.task(name, pre, function() {
connect.server({
root: root,
port: 3000,
debug: true,
livereload: false
});
});
}
createServerTask( 'prodServe', ['watch'], [ options.tmp+'/serve', options.src, './' ]);
createServerTask( 'prodServe:dist', ['build'], [ options.dist ]);
createServerTask( 'prodServe:e2e', ['inject'], [ options.tmp+'/serve', options.src, './' ]);
createServerTask( 'prodServe', ['watch'], [ options.tmp+'/serve', options.src, './' ]);
createServerTask( 'prodServe:e2e-dist', ['build'], [ options.dist ]);
};
gulp.task('prodServe', ['watch'], function () {
module.exports(conf.paths);
});
gulp.task('prodServe:dist', ['build'], function () {
module.exports(conf.paths);
});
gulp.task('prodServe:e2e', ['inject'], function () {
module.exports(conf.paths);
});
gulp.task('prodServe:e2e-dist', ['build'], function () {
module.exports(conf.paths);
});
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');
var util = require('util');
var proxyMiddleware = require('http-proxy-middleware');
function browserSyncInit(baseDir, browser) {
browser = browser === undefined ? 'default' : browser;
var routes = null;
if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
routes = {
'/bower_components': 'bower_components'
};
}
var server = {
baseDir: baseDir,
routes: routes
};
/*
* You can add a proxy to your backend by uncommenting the line bellow.
* You just have to configure a context which will we redirected and the target url.
* Example: $http.get('/users') requests will be automatically proxified.
*
* For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.0.5/README.md
*/
// server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', proxyHost: 'jsonplaceholder.typicode.com'});
browserSync.instance = browserSync.init({
startPath: '/',
server: server,
browser: browser,
notify: false,
ui: false
});
}
browserSync.use(browserSyncSpa({
selector: '[ng-app]'// Only needed for angular apps
}));
gulp.task('serve', ['watch'], function () {
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});
gulp.task('serve:dist', ['build'], function () {
browserSyncInit(conf.paths.dist);
});
gulp.task('serve:e2e', ['inject'], function () {
browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});
gulp.task('serve:e2e-dist', ['build'], function () {
browserSyncInit(conf.paths.dist, []);
});
所以,如何更改文件(脚本,链接)的顺序包含在使用gulp和bower的html文件中。