SpringBootでgulpを使うときのオレオレgulpfile.js


SpringBoot(+thymeleaf)でWeb開発をするときのgulpfileの構成についてまとめてみます。

普通の(サーバーを意識しないフロントエンド開発のgulp)と違う点は、

・src/main/resources/ 以下のjsを編集し、target/classes/に吐き出したい
 (そうしないと、mvn clean→mvn install しないとtarget/classes/以下のリソースが更新されない。
  つまりローカルのサーバを立ち上げた状態でsrcフォルダをいじってブラウザを更新しても更新が反映されない。
  そしてこのmvn installのリソースファイルのコピーが遅い。。。)

・mvn installした直後に正しくリソースファイルが配置されていてほしい
 (上記の通りにtarget/ のみにコンパイル後のファイルを配置する方式だと、mvn clean→mvn installした最初の状態ではほしいファイルがそろっていない状態になってしまう)

という2点かと思います。

var gulp = require('gulp');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');
var webpack = require('gulp-webpack');
var babel = require('gulp-babel');
var plumber = require('gulp-plumber');

//PATH
var TARGET_PATH = '../../../../target/classes/static/';
var THYMELEAF_PATH = '../../../../target/classes/templates/';

//command definition
var scssCompile = 'stylesheet';
var jsCompile = 'javascript';
var htmlCopy = 'thymeleaf';
var imgCopy = 'img';

gulp.task(scssCompile, function () {
    gulp.src('scss/**/*.scss')
        .pipe(plumber())
        .pipe(scss())
        .pipe(gulp.dest(TARGET_PATH + 'css'))
        .pipe(gulp.dest('css'));
});

gulp.task(jsCompile, function () {
    gulp.src('js/**/index.js')
        .pipe(plumber())
        .pipe(webpack({
            output: {
                filename: 'bundle.min.js'
            }
        }))
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(TARGET_PATH + 'js'))
        .pipe(gulp.dest('js'));
});

gulp.task(htmlCopy, function () {
    gulp.src('../templates/**/*.html')
        .pipe(gulp.dest(THYMELEAF_PATH));
});

gulp.task(imgCopy, function () {
    gulp.src('img/**/*')
        .pipe(gulp.dest(TARGET_PATH + "img"));
});

gulp.task('default', [scssCompile, jsCompile, htmlCopy, imgCopy]);

gulp.task('watch', function () {
    gulp.watch('scss/**/*.scss', [scssCompile]);
    gulp.watch('js/**/*.js', [jsCompile]);
    gulp.watch('img/**/*', [imgCopy]);
    gulp.watch('../templates/**/*.html', [htmlCopy]);
});

まぁ、結局コードに落としてしまうと

・srcフォルダとtargetフォルダ両方にコンパイルされたファイルを配置するぜ!

っていう簡単なことですが。。。

それにしても、この長々と相対パス指定するのあんまり筋がよくない気がするので他にいい方法があれば探っていきたいですね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です