Question

我正在开发一个角度项目，其中所有角度文件和html都在 / src / app 文件夹中，并且有gulp文件夹创建环境

现在我想在gulp的帮助下为apache tomcat创建 .war 文件但是不明白如何实现这个

当我使用gulp serve:dist时，它会在应用上方创建 dist 文件夹和 .tmp 文件夹。下面是完整的树

|-- bower_components
|-- bower.json
|-- dist
|-- gulp
|-- gulpfile.js
|-- node_modules
|-- package.json
|-- README.md
|-- src

dist 文件夹树结构在

下面

 |-- assets
    |-- favicon.ico
    |-- fonts
    |-- index.html
    |-- maps
    |-- scripts
        |-- app-4c451c4900.js
        `-- vendor-96995b9d6e.js
    `-- styles
        |-- app-1060af3936.css
        `-- vendor-7b579e8106.css

这里这个index.html已经缩小了html

/dist/index.html

 <!doctype html><html ng-app="app"><head><meta charset="utf-8"><base href="/"><title ng-bind="state.current.data.pageTitle"></title><meta name="description" content="ProjectName"><meta name="viewport" content="width=device-width"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/vendor-7b579e8106.css"><link rel="stylesheet" href="styles/app-1060af3936.css"></head><body ng-controller="MainController as main"><!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]--><div ng-include="'app/views/common/content.html'"></div><script src="scripts/vendor-96995b9d6e.js"></script><script src="scripts/app-4c451c4900.js"></script></body></html>

在这里你可以看到它正在使用 app / views / common / content.html 作为主html并且只有2个js和2个css文件

并且 .tmp 文件夹具有以下结构

|-- partials
|   `-- templateCacheHtml.js
`-- serve
    |-- app
    |   `-- index.css
    `-- index.html

的.tmp /服务/ index.html中

<!doctype html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <base href="/">
    <title ng-bind="state.current.data.pageTitle"></title>
    <meta name="description" content="ProjectName">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="../bower_components/angular-toastr/dist/angular-toastr.css" />
    <link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="../bower_components/ng-table/dist/ng-table.css" />
    <link rel="stylesheet" href="../bower_components/metisMenu/dist/metisMenu.css" />
    <link rel="stylesheet" href="../bower_components/roboto-fontface/css/roboto/roboto-fontface.css" />
    <link rel="stylesheet" href="../bower_components/roboto-fontface/css/roboto-condensed/roboto-condensed-fontface.css" />
    <link rel="stylesheet" href="../bower_components/sweetalert/dist/sweetalert.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <link rel="stylesheet" href="app/index.css">
    <!-- endinject -->
    <!-- endbuild -->
    </head>
     <body ng-controller="MainController as main" >
        <!--[if lt IE 10]>
           <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ng-include="'app/views/common/content.html'"></div>

    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="../bower_components/angular-touch/angular-touch.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="../bower_components/angular-messages/angular-messages.js"></script>
    <script src="../bower_components/angular-aria/angular-aria.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="../bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script src="../bower_components/moment/moment.js"></script>
    <script src="../bower_components/ng-table/dist/ng-table.js"></script>
    <script src="../bower_components/pace/pace.js"></script>
    <script src="../bower_components/metisMenu/dist/metisMenu.js"></script>
    <script src="../bower_components/angular-confirm-modal/angular-confirm.js"></script>
    <script src="../bower_components/angular-ui-validate/dist/validate.js"></script>
    <script src="../bower_components/oclazyload/dist/ocLazyLoad.js"></script>
    <script src="../bower_components/sweetalert/dist/sweetalert.min.js"></script>
    <script src="../bower_components/angular-sweetalert/dist/ngSweetAlert.js"></script>
    <script src="../bower_components/angular-sweetalert/dist/ngSweetAlert.min.js"></script>
    <script src="../bower_components/sockjs/sockjs.js"></script>
    <script src="../bower_components/stomp-websocket/lib/stomp.min.js"></script>
    <script src="../bower_components/ng-stomp/src/ng-stomp.js"></script>
    <!-- endbower -->
    <!-- inject:vendor -->
    <script src="libs/FileSaver.js"></script>
    <script src="libs/aws-sdk-2.4.8.min.js"></script>
    <!-- endinject -->

    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <script src="app/index.module.js"></script>
    <script src="app/user/user.controller.js"></script>
    <script src="app/services/key.service.js"></script>
    <script src="app/services/auth.service.js"></script>
    <script src="app/main/main.controller.js"></script>    
    <script src="app/index.run.js"></script>
    <script src="app/index.config.js"></script>
    <script src="app/app.interceptor.js"></script>
    <script src="app/app.constant.js"></script>
    <!-- endinject -->


    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->

     </body>
     </html>

gulp serve:dist任务有以下代码

'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,
      removeScriptTypeAttributes : true
    }))
    .pipe($.angularTemplatecache('templateCacheHtml.js', {
      module: 'app',
      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 htmlFilter = $.filter('*.html', { restore: true });
  var jsFilter = $.filter('**/*.js', { restore: true });
  var cssFilter = $.filter('**/*.css', { restore: true });
  var assets;

  return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
    .pipe($.inject(partialsInjectFile, partialsInjectOptions))
    .pipe(assets = $.useref.assets())
    .pipe($.rev())
    .pipe(jsFilter)
    .pipe($.sourcemaps.init())
    .pipe($.ngAnnotate())
    .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
    .pipe($.sourcemaps.write('maps'))
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe($.sourcemaps.init())
    .pipe($.cleanCss({ processImport: false }))
    .pipe($.sourcemaps.write('maps'))
    .pipe(cssFilter.restore)
    .pipe($.replace('../../bower_components/bootstrap/fonts/', '../fonts/'))
    .pipe($.replace('../../bower_components/fontawesome/fonts/', '../fonts/'))
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe(htmlFilter)
    .pipe($.htmlmin({
      collapseWhitespace: true,
      removeScriptTypeAttributes : 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('**/*.{otf,eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .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,less}')
  ])
    .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']);

gulp.task('war', ['html', 'fonts', 'other'], function () {
    gulp.src([
        path.join(conf.paths.dist, '/**'),
        path.join(conf.paths.tmp, '/**')
        ])
        .pipe($.war({
            welcome: 'index.html',
            displayName: 'MY Project',
        }))
        .pipe($.zip('myProject.war'))
        .pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});

gulp.task('build', ['war']);

这里我添加了创建.war文件的代码，但它没有创建正确的文件夹

Answer 1

我这样解决了

首先从 index.config.js

中删除html5模式

// $locationProvider.html5Mode(true);

并在 app / index.html 中添加<base hreaf="/myProject"> 而不是运行

gulp.task('war', ['html', 'fonts', 'copyfonts', 'other'], function () {
    gulp.src([
        path.join(conf.paths.dist, '/**')
        ])
        .pipe($.war({
            welcome: 'index.html',
            displayName: 'My Project',
        }))
        .pipe($.zip('myProject.war'))
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/')));
});

希望它可以帮助某人

如何从gulp创建war文件

/dist/index.html

的.tmp /服务/ index.html中

1 个答案: