https://github.com/mikesir87/gulp-maven-project
A demo of using gulp/bower/node in a Maven project
https://github.com/mikesir87/gulp-maven-project
Last synced: 5 months ago
JSON representation
A demo of using gulp/bower/node in a Maven project
- Host: GitHub
- URL: https://github.com/mikesir87/gulp-maven-project
- Owner: mikesir87
- Created: 2015-02-06T03:14:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-05T21:35:19.000Z (over 8 years ago)
- Last Synced: 2024-12-16T16:53:15.107Z (5 months ago)
- Language: CSS
- Size: 52.7 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gulp Maven Project
This project serves as a demo of using Gulp/Bower/Karma in a Maven project. If you see any areas of improvement, I'd be happy to hear them! There isn't much out there on how to combine these two development workflows, so this serves to at least be a start.
## Rationale
Building Single-Page Applications (SPA) in war projects can be quite tricky. Sure, you could include the _bower_components_ in your webapp, include 30+ script tags in your html pages, and not worry about minified JavaScript code. But, there's a better way (for you and your users)!
But, figuring out how to plug in various Node tools can be tricky in a Java context. This project serves as an example.
The Gulp configuration takes the code from __src/main/ui__ and creates the distributable in target/gulp-webapp. This ensures that built code is not in the source branch, preventing accidental commits and funky war files.
## Project Structure
The listing below outlines the additions that are made to the normal war file layout.
```
/
bower.json - bower dependencies config file
gulpfile.js - gulp task file
karma.conf.js - karma testing config file
package.json - node dependencies config file
vendor.json - an explicit listing of bower sources to include
src/main/ui/
index.html
app/
controllers/
directives/
filters/
services/
app.js - the actual module definition
less/
custom/ - custom LESS stylesheets
theme/ - LESS stylesheets for the overall theme
templates/ - the Angular partials/templates
test/ - contains Spec.js files for karma testing
controllers/
directives/
filters/
services/
target/
bower_components - where the bower components are installed
${project.name} - where the actual distributable code is created
```
## Gulp tasks
The default gulp task will do the following:
- Combine all bower dependencies into a vendor.js (managed through /vendor.json)
- Combine all app JavaScript into a single app.js
- Build all LESS stylesheets
- Combine all partials and drop into an Angular templatecache
- Run all tests
- Set up a webserver that:
- Serves files from target/gulp-webapp/${project.name} (the built code)
- Proxies API requests throw the webserver to your underlying Wildfly server
- Starts a livereload server, watching the target/gulp-webapp/${project.name} folder
If running using the **build:prod** task, all the above is completed, minus the webserver. In addition, all stylesheets and JavaScript is minified (uglified). This is the task that is used during a Maven build.
## Development
What I have found to work best is to do the following:
- Setup a Wildfly server in Eclipse and deploy the application in it (so you have a real backend)
- In a command-line, run gulp from your project root. This'll start the webserver and livereload. Open your browser to this (http://localhost:8000)
- You can then either work in Eclipse or another tool (like Sublime). As you modify the code in _src/main/ui_, gulp's watch will trigger the necessary tasks.