[Java] [Spring] [JavaScript] [gulp] [webpack] [uglify] Private AngularJS application development environment

background

I was making a SPA web application with Java and AngularJS. Since it is a small scale, I put everything in the war and deploy it.

The number of JavaScript files has increased, and I wanted to manage to put them together.

History of conflict

It is the result of such a conflict.

JavaScript is also included in the war! ↓ It is troublesome to write a lot of <script> tags, and I want to put them together in one file. That will reduce the number of HTTP connections. ↓ Let's put it together with Maven! ↓ I can't touch JavaScript with Maven. After minifying, something doesn't work !? ↓ Isn't it better to leave JavaScript to JavaScript? ↓ It's not good to call node from Maven. Or rather, there is no node in the build environment that contains Jenkins. ↓ Now that's okay, let's include the built JavaScript in the repository. <Imakoko!

Directory structure

I decided to make it like this.

python

src/
  main/
    java/(Java source storage)
    js/                  (JavaScript source storage)
      app.js             (File to load into webpack)
      **/*.spec.js         (Test here)
      **/*.js              (Various other JavaScript)
    webapp/
      static/
        js/
          bundle.js (files compiled by webpack)
          bundle.min.js  (File compressed with uglify)
    resources/(Storage of property files, etc.)
  test/
    java/(Java test source storage)
    resources/(Place for test property files, etc.)
gulpfile.js
karma.conf.js
package.json
pom.xml

I decided to build bundle.js and bundle.min.js in advance and store them in the repository.

During development work ...

I'm running gulp and karma to constantly update bundle.js.

I have enabled automatic deployment of NetBeans to reflect bundle.js.

Configuration files

gulp

gulpfile.js

'use strict';

var gulp       = require('gulp');
var webpack    = require('gulp-webpack');
var uglify     = require('gulp-uglify');
var rename     = require('gulp-rename');
var path       = require('path');
var fs         = require('fs');
var karma      = require('karma');

var config = {
    srcdir: './src/main/js',
    dstdir: './src/main/webapp/static/js',
    src: 'app.js',
    dst: 'bundle.js',
    dstmin: 'bundle.min.js',
    karmaconf: path.join(__dirname, 'karma.conf.js')
};

gulp.task('webpack', () => {
    var opts = {
        debug: true,
        output: { filename: config.dst },
        devtool: '#source-map'
    };
    
    return gulp.src(path.join(config.srcdir, config.src))
        .pipe(webpack(opts))
        .pipe(gulp.dest(config.dstdir));
});

gulp.task('uglify', [ 'webpack' ], () => {
    var opts = {
        warnings: true
    };

    return gulp.src(path.join(config.dstdir, config.dst))
        .pipe(rename(config.dstmin))
        .pipe(uglify(opts))
        .pipe(gulp.dest(config.dstdir));
});

gulp.task('karma', ['uglify'], () => {
    var opts = {
        configFile: config.karmaconf,
        singleRun: true
    };

    new karma.Server(opts).start();
});

gulp.task('clean', () => {
    fs.unlink(path.join(config.dstdir, config.dst), () => {});
    fs.unlink(path.join(config.dstdir, config.dst) + '.map', () => {});
    fs.unlink(path.join(config.dstdir, config.dstmin), () => {});
});

gulp.task('all', [ 'uglify' ]);

gulp.task('default', ['all'], () => {
    var files = [
        path.join(config.srcdir, '**/*.js'),
        '!' + path.join(config.srcdir, '**/*.spec.js'),
        '!' + path.join(config.srcdir, '**/*.test.js')
    ];
    gulp.watch(files, ['all']);
});