Project Structure
I decided to follow maven conventions and use the src/[main|test]/[language] conventions, and to have all the project definition files (package.json, bower.json, gulpfile.js) in the project root. I soon found myself wanting to split up the gulp tasks into groups, so I added a gulp/ folder, resulting in a structure like this:
webapp-module
`--- bower_components/ : runtime and test JS dependencies
`--- node_modules/ : build dependencies
`--- gulp/ : JS build tasks
`--- src/
`--- main/js : main javascript files
`--- test/js : test javascript files
`--- bower.json : runtime and test dependency configuration
`--- package.json : npm configuration, including build dependencies
`--- karma.conf.js : test framework configuration
`--- gulpfile.js : root build file
`--- pom.xml : normal maven project configuration (packaging=war)
`--- target/gulp/ : output directory for JS files
Project Configuration
In the POM, I added an entry for target/gulp as a project resource
<build>
...
<resources>
<resource>
<directory>${project.build.directory}/gulp</directory>
</resource>
</resources>
...
</build>
In addition, I used the maven-exec-plugin to include it by default in the build:
<plugins>
...
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<executable>gulp</executable>
<arguments>
<argument>check</argument>
<argument>build</argument>
</arguments>
</configuration>
<executions>
<execution>
<id>build-javascript</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<executable>gulp</executable>
<arguments>
<argument>check</argument>
<argument>build</argument>
</arguments>
</configuration>
<executions>
<execution>
<id>build-javascript</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
...
</plugins>
This of course requires node & npm to be installed and on the path, and for the gulp module (and in our configuration, bower too) to be globally installed. Therefore on a clean checkout, a developer would run:
npm install -g gulp bower
npm install
They would then be free to mvn package or whatever lifecycle they chose (after generate-resources) and the javascript would be checked and built according to the gulp check and build tasks.
Next Steps
In my next post I'll share some of the structure of the gulp tasks, so you can get a feel for what processes are used to build the javascript into the target/gulp folder.
