如何更改订单包括index.html文件中的脚本链接与gulp和bower

时间:2016-05-11 09:32:02

标签: javascript angularjs gulp bower

我是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文件中。

0 个答案:

没有答案