pro.mean pro.mean - 2 months ago 28
AngularJS Question

How to create war files from gulp

I am working on one angular project where all angular files and html in /src/app folder and there is gulp folder which create the environment

now I want to create

.war
files for apache tomcat with help of gulp but do not understand how to achieve this

when I use
gulp serve:dist
it creates dist folder and .tmp folder above the app. below is complete tree

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


dist folder tree structure is below

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


and here this index.html has minified 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>


here you can see it is using app/views/common/content.html for main html and only having 2 js and 2 css files

and the .tmp folder has below structure

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


.tmp/serve/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
task has below code

'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']);


Here I added code to create .war files but it does not create proper folder

Answer

I solved by doing this

first remove html5 mode from index.config.js

// $locationProvider.html5Mode(true);

and add <base hreaf="/myProject"> in app/index.html and than run

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, '/')));
});

hope it helps someone