angularjsgruntjspreloadgrunt-usemin

Grunt usemin, get final path of compressed files to allow preload


I have a HTML block like this for minify css and js files:

<!-- build:css static/assets/css/combined.css -->
<link rel="stylesheet" href="static/bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/photoswipe.css" />
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/default-skin/default-skin.css" />
<link rel="stylesheet" href="static/assets/css/jasny-bootstrap.min.css">
<link rel="stylesheet" href="static/assets/css/main.min.css">
<link rel="stylesheet" href="static/assets/css/custom.css">
<link rel="stylesheet" href="static/common/da-angular-spinkit/angular-spinkit.min.css">
<!-- endbuild -->

I need to make a preload of the resource static/assets/css/combined.css but the final file has a hash at the end of its name, so the final path is like static/assets/css/combined.min-af5890ce41.css, so I don't know how to include the following tag:

<link rel="preload" href="static/assets/css/combined.min-af5890ce41.css"/>
 -------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^

Because I don't know what is the final name of the generated minified file.

How can I get the output of this generated file? I only need the final path name. I search about grunt-usemin but seems to be "minimalist".

Thank you.

EDIT

I found on the project some pieces of grunt code if you can see what module is acting on the file hashes:

/client/static/bower_components/bootstrap/Gruntfile.js:

Here I can see:

I can't see what of this modules acts on the build:js or build:css in the index.html.

/client/static/bower_components/photoswipe/Gruntfile.js:

Here I can see npm tasks:

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-jekyll');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-aws-s3');
  grunt.loadNpmTasks('grunt-svgmin');

EDIT 2

On the folder /dev/ there is a gruntfile.js with this code (it seems not related):

var src = "../src/client/";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-angular-gettext");

    // We extract translations with 'grunt nggettext_extract'. Those files go to '/dev/translations-extract' directory.
    grunt.initConfig({
        nggettext_extract: {
            pot: {
                files: {
                    'translations-extract/template.pot': [src + 'static/common/**/*.html', src + 'static/states/**/*.html', src + 'index.html', src + 'indexMobile.html']
                }
            },
        },
        // We compile those files (*.po) with 'grunt nggettext_compile. The translations.js file goes to /client/static/util/translations/ dir.
        nggettext_compile: {
            all: {
                options: {
                    module: 'alvarez',
                },
                files: {
                    '../src/client/static/common/translations/translations.js': ['translations-extract/*.po']
                }
            },
        },
    })
}

And then, on /dev/bower_components/ there are tons of plugins, each one with its gruntfile.js inside.

EDIT 3

Found on /ops/ a gulpfile.js and seems to be related

/**
 * Crea una versión de distribución concatenada y minificada
 */

var gulp = require('gulp');
var run = require('gulp-run');
var gulpif = require('gulp-if');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var debug = require('gulp-debug');
var del = require('del');
var ngAnnotate = require('gulp-ng-annotate');
var minifyHTML = require('gulp-minify-html');
var cleanCSS = require('gulp-clean-css');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var embedTemplates = require('./embed-templates/index.js');
var dist = './dist/';
var indexDist = dist + 'client/';
var HTMLDist = indexDist + 'static/';
var src = '../src/';
var assetsSrc = src + 'client/static/assets/'
var cssSrc = assetsSrc + 'css/';
var serverDist = dist + 'server/';
var libDist = dist + 'lib/';

// pm2
// Init-dist
gulp.task('pm2', function () {
    run('pm2 start ' + serverDist + 'alvarez.js').exec();
});

// Init-stop
gulp.task('pm2-stop', function () {
    run('pm2 stop ' + serverDist + 'alvarez.js').exec();
});

//Init-restart
gulp.task('pm2-restart', function () {
    run('pm2 restart ' + serverDist + 'alvarez.js').exec();
});

// npm-install on dist
gulp.task('npm-install-dist', function () {
    run('npm install --production --prefix ' + serverDist).exec();
})

// Dist subtasks

// Cleaning dist
gulp.task('del-dist', function () {
    del(dist, {
        force: true
    }, console.log('Files deleted'));
});

// Moving index.js
gulp.task('move-server-js', function () {
    return gulp.src([src + 'server/alvarez.js', src + 'server/package.json'])
        .pipe(gulp.dest(serverDist));
});

gulp.task('move-config-js', function () {
    return gulp.src([src + 'server/lib/**/*.js'])
        .pipe(gulp.dest(serverDist + 'lib/'))
})

//gulp.task('move-lib-js', function () {
//    return gulp.src(src + 'lib/config.js')
//        .pipe(gulp.dest(libDist));
//});
//
//gulp.task('move-boot-pro', function () {
//    return gulp.src(src + 'lib/boot.pro.js')
//        .pipe(rename('boot.js'))
//        .pipe(gulp.dest(libDist));
//})

// Moving html
gulp.task('move-html', function () {
    var opts = {
        empty: true
    };
    return gulp.src([src + 'client/static/**/**/*.html', src + 'client/static/**/**/*.swf'])
        .pipe(minifyHTML(opts))
        .pipe(gulp.dest(HTMLDist));
});

gulp.task('minify-css', ['move-assets', 'move-html-index', 'move-html-index-mobile'], function() {
    return gulp.src(HTMLDist + 'assets/css/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest(HTMLDist + 'assets/css/'));
})

gulp.task('move-assets', function () {
    return gulp.src(src + '/client/static/assets/**/*.*')
        .pipe(gulp.dest(HTMLDist + 'assets/'));
});

// Moving html index
gulp.task('move-html-index', function () {
    var assets = useref.assets();
    //.pipe(gulpif('**\/da-*.js', embedTemplates()))
    return gulp.src(src + 'client/index.html')
        .pipe(assets)
        .pipe(gulpif('*.js', embedTemplates()))
        .pipe(gulpif('.*\.js', ngAnnotate()))
        .pipe(gulpif('.*\.js', uglify()))
        .pipe(rev())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(revReplace())
        .pipe(debug())
        .pipe(gulp.dest(indexDist));
});

gulp.task('move-html-index-mobile', function () {
    var assets = useref.assets();
    return gulp.src(src + 'client/indexMobile.html')
        .pipe(assets)
        .pipe(gulpif('*.js', embedTemplates()))
        .pipe(gulpif('.*\.js', ngAnnotate()))
        .pipe(gulpif('.*\.js', uglify()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest(indexDist));
})

gulp.task('embed-templates', [], function () {
    return gulp.src([src + 'client/static/states/**/da*/*.js', src + 'client/static/common/**/da*/*.js'])
        .pipe(gulpif('*.js', embedTemplates()))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(gulp.dest(indexDist))
});

// Build dist task
gulp.task('build-dist', ['move-html', 'move-server-js', 'move-config-js', 'minify-css'], function () {
    console.log('Dist ready...');
});

Solution

  • The answer is no in grunt-usemin, but in one of the dependencies: grunt-filerev. This last module is the one used to create the file revisions of you css, js and other files.

    After grunt-filerev is executed (executed as a subtask of grunt-usemin), it creates a summary (stored in within your grunt task, under grunt.filerev.summary). The summary contains the following information:

    {
       “original.js” : “destination.59bcc35a.js”
    }
    

    So you could use it later on you string replacement method/module of your choice.

    You can find more information about grunt-filerev here.

    Hope it helps.