Spring + Gulp useref

I am having some issue using Gulp useref with spring mvc framework.

I created my jsp pages using useref format to combine and minify assets.

JSP Page

My gulpfile.js

var gulp = require('gulp');
var useref = require('gulp-useref');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');

const ROOT_DIR = 'src/main/webapp';
const TEMP_DIR = './tmp';

const ROOT_DIR = 'src/main/webapp';
const TEMP_DIR = './tmp';
// replace <script> and <link> references with minified versions
gulp.task('html', function () {
    var assets = useref.assets({
       searchPath: ROOT_DIR
    });

    return gulp.src(ROOT_DIR + '/**/layout*.jsp')
        .pipe(assets)
        // concatenate and minify JS
        .pipe(gulpif('*.js', uglify({})))
        // concatenate and minify CSS
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest(TEMP_DIR));
});

gulp.task('default', ['html']);

when I run gulp, useref replaces script and css html references correctly but unfortunately it doesn’t create the minified versions of the assets.

I also tried to debug gulp and useref by adding a log statement to useref index file and print globs var:

this is from useref index file

// Get relative file paths and join with search paths to send to vinyl-fs
globs = filepaths
    .filter(isRelativeUrl)
    .map(function (filepath) {
        if (opts.transformPath) {
            filepath = opts.transformPath(filepath);
        }
        if (searchPaths.length) {
            return searchPaths.map(function (searchPath) {
                return getSearchPaths(file.cwd, searchPath, filepath);
            });
        } else {
            return path.join(file.base, filepath);
        }
    });

The output on my console:

[ [ '/Users/user/Documents/projects/test/src/main/webapp/${contextPath}/includes/css/combined.css' ],
  [ '/Users/user/Documents/projects/test/src/main/webapp/${contextPath}/includes/css/typography.css' ] ]

Unfortunately the ${contextPath} shouldn’t be part of the asset path.

In the previous version of gulp file I was using gulp bundle and it was working fine:

// minify JS and CSS files
gulp.task('bundle', bundle(ROOT_DIR + '/**/layout*.jsp', {
        appDir: ROOT_DIR,
        buildDir: TEMP_DIR,
        minify: true
    })
);

Is there anything I am missing or doing wrong?


Source: jsp

Leave a Reply