luismahou / grunt-hashres Goto Github PK

Hi,
I can't get grunt-hashres to work together with Requirejs. My index.html has if build and if local conditions, like this

<!--(if target build)>
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="modules/main.js" data-main="main"></script>
<!(endif)-->

 <!--(if target local)> -->
 <!--<script type="text/javascript">parent.uitest && parent.uitest.instrument(window);</script>-->
 <link rel="stylesheet" type="text/css" href="css/app.css">
 <script src="http://localhost:35729/livereload.js"></script>
 <script src="../../bower_components/requirejs/require.js" data-main="modules/main"></script>
 <!--<!(endif)-->

in my gruntfile.js I compiled, minified css and js before hashres them, like this

hashres: {
      options: {
        encoding: 'utf8',
        fileNameFormat: '${name}.${hash}.cache.${ext}',
        renameFiles: true
      },
      prod: {
        src: [
          '<%= pkg.folders.build + pkg.name + "-" + pkg.version %>/modules/main.js',
          '<%= pkg.folders.build + pkg.name + "-" + pkg.version %>/css/app.css'],
        dest: '<%= pkg.folders.build + pkg.name + "-" + pkg.version %>/index.html'
      }
}

I saw that the files got hashed names

Running "hashres:prod" (hashres) task
target/veryInk-0.0.8/modules/main.js >> main.56f70f33.cache.js
target/veryInk-0.0.8/css/app.css >> app.56895787.cache.css

but the index.html is not updated, so of course it can't find the referenced css and js.
Any hint would be greatly appreciated.
Trang.

When I specify option renameFiles to true, I get warning with unable to rename files.
File specified in dest is replaced correctly.

Paths are correct. My project is in directory C:\web\www\myproject.cz and CSS file is here C:\web\www\myproject.cz\www\frontend\dist\css\style.css

I'm using Windows 8 64bit.

Config:

hashres: {
    options: {
        encoding: 'utf8',
        fileNameFormat: '${name}.${ext}?${hash}',
        renameFiles: true
    },
    dist: {
        src: [
            'www/frontend/dist/css/style.css',
            'www/frontend/dist/js/script.js',
            'www/frontend/dist/js/scriptHeader.js'
        ],
        dest: 'app/FrontModule/templates/@layout.latte',
    }
}

Output from console:

Running tasks: hashres

Running "hashres" task

Running "hashres:dist" (hashres) task
Verifying property hashres.dist exists in config...OK
Files: www/frontend/dist/css/style.css, www/frontend/dist/js/script.js, www/frontend/dist/js/scriptHeader.js -> app/FrontModule/templates/@layout.latte
Options: fileNameFormat="${name}.${ext}?${hash}", encoding="utf8", renameFiles
Verifying property hashres.dist.src exists in config...OK
Verifying property hashres.dist.dest exists in config...OK
Warning: ENOENT, no such file or directory 'C:\web\www\myproject.cz\www\frontend\dist\css\style.css' Use --force to continue.

Aborted due to warnings.

Thanks

Running tests off 41573e4 results in

Running "jshint:all" (jshint) task
Linting tasks/hashresHelper.js ...ERROR
[L80:C74] W033: Missing semicolon.
          grunt.log.debug('Substituting ' + value[0] + ' by ' + value[1]) 
[L83:C92] W033: Missing semicolon.
          grunt.log.debug('Substituting ' + nameToNameSearch[value[0]] + ' by ' + value[1]) 

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

I've stumbled upon this plugin and it seems very nice. My first impression was it's just like using grunt-usemin + grunt-filerev.

It would be really nice if you could add some HTML examples to easily demonstrate what transformations it performs. Similar to the usemin examples: https://github.com/yeoman/grunt-usemin#blocks

I really hope this project is more active than grunt-usemin.

We have been using hashres for awhile and it works great -- at least until one of the developers added a bower component named spin.js today. The tasks fails with this error message:

Warning: EISDIR, illegal operation on a directory Use --force to continue.

If I delete the spin.js folder first -- the tasks completes successfully -- without the needed file of course.

Suggestions or help would be much appreciated.

Hi,

I'm trying to replace my angular controllers and there is my issue

hashres conf :

module.exports = {
    options: {
        encoding: 'utf8',
        fileNameFormat: '${hash}.${ext}',
        renameFiles: true
    },
    dist: {
        src: [
            '<%= pkg.path.dist %>js/app.min.js',
            '<%= pkg.path.dist %>css/app.min.css'
        ],
        dest: '<%= pkg.path.dist %>index.html'
    },
    test: {
        src: [
            '<%= pkg.path.dist %>js/controllers/login/login.js',
            '<%= pkg.path.dist %>js/controllers/login/activation.js',
            '<%= pkg.path.dist %>js/controllers/login/forgot.js'
        ],

        dest: '<%= pkg.path.dist %>test'
    }
};

There is the test file :

js/controllers/login/login.js
js/controllers/login/activation.js
js/controllers/login/forgot.js

And the output test file :

js/controllers/login/6138e561.js
js/controllers/login/6138e561.js
js/controllers/login/6138e561.js

And the output console :

Running "hashres:test" (hashres) task
dist/js/controllers/login/login.js >> 6138e561.js
dist/js/controllers/login/activation.js >> 24bc3789.js
dist/js/controllers/login/forgot.js >> 6b402978.js

Some have the solution ?

When I try to use this, I get the following error:

<WARN> Cannot use 'in' operator to search for 'src'

As far as I can see, it is possible to use regex as source (myscripts/*.js), but it does not recurse into subdirectories. My Javascript is really rusty, so I might have just misread the code, and just did not find the right format when testing.

Adding a way to recurse into subdirectories would make things much easier when a number of assets need to be included from a number of directories.

I just wanted to drop a "thank you" as I use this at work and home. I absolutely love this and wanted to give you a big public "ata boy" -keep up the great work!

For a project I'm working on, I wanted to replace in require.js-formatted script tags, for example transforming:

<script data-main="js/main" src="js/lib/require.js"></script>

to:

<script data-main="js/main.7dcb450a" src="js/lib/require.js"></script>

This isn't possible out-of-the-box because matching is done by full file basename, including extension. So I added optional ability to set the find and replace match formats to something distinct from the filename format in: bregenspan@af8bf79

Setting two extra format strings strikes me as a bit inelegant but I have yet to come up with a nicer approach for it.

@Luismahou - is this the kind of feature you'd consider for core? If so I'll clean things up and add tests + do a pull request.

Thanks for the very useful module!
-Ben

Current Settings

hashres: {
    options: {
        encoding: 'utf8',
        fileNameFormat: '${name}.${ext}?${hash}',
        renameFiles: false
    },
    prod: {
        src: [
            'src/build/app.min.js'
        ],
        dest: 'src/index.html'
    }
}

Issue

1. Already Given a hashed path via 'hashres'
   build/rgbSketch.min.js?abbf773e
2. When a new hash is needed, hashres currently does the following...
   build/rgbSketch.min.js?3559407c?abbf773e

right now dest: ['dist/**/*.html'] doesn't work

grunt-hashres is a dependency of a repo I contribute to, HabitRPG. Using npm install to load it up (on my Windows 7 machine, anyway; not sure if it'd break elsewhere) throws an ENOENT error and craps out. It looks like npm attempts to create *3$3.js from the "Tests for 'Escape Special Characters' pull request", fails because * is a wildcard character not allowed in a Windows filename, then brings the npm install to a halt when it discovers that the file is missing. Any chance *3$3.js could be removed, or use different special characters for its purpose?

First of all: thanks a lot for building this. This works way, way better already than any similar solution I've come across. :-)

Just one thing to make it perfect (for me): I'd like to be able to tweak the pattern for the filenames generated. As of now, it's hash.original.cache.ext; personally, I'd prefer to use just hash.ext.

(I like short filenames in production. Other than that, our workflows seem pretty similar.)

Hi there,

i have made a version of hashres which creates a copy of the hashed file, rather than rename.

there is a gist of the changes here (not really sure how to do pull requests and all that)

https://gist.github.com/c23gooey/3e311b444bca9c80e1dd

cheers,

chris

Hello.

Can you ignore dirs if using **/*.js?
Force options just stop hashing.

Hey! I have a few scripts depending on each other: script_1.js includes a reference to script_2.js and script_2.js includes a reference to script_3.js. I know it's bad architecture, but I do need to hash script_2.js AND replace the reference to the hashed script_3.js. However currently, script_2.js doesn't get picked up by hashres for replacement.

  production: {
    src: [
      'dist/javascripts/script_2.js',
      'dist/javascripts/script_3.js'
    dest: [
      'dist/javascripts/script_1.js',
      'dist/javascripts/script_2.js'
    ],
  }

If you have in your html file something like

<script src="myfile.js?v=4.2.0">

hashres ends up chopping off the ?= from the replaced file

<script src="myfile.82828ef.js=4.2.0">

which is not a valid url. The problem seems to be in the capture after the url, which is not used in the replace.

When hashres is run, it sets unique hashes on all the files. Is it possible to have the same hash used on multiple files when I run hashres? Like so:

app.js?v=123
app.css?v=123 
vendor.css?v=123

Thanks!

If a particular filename is the same as a partial part of another file, hashres is incorrectly inserting hash into the partial filename match as well.

Example:

base.min.js >> base.min.20decb81.js
angular-base.min.js >> angular-base.min.ff38c0a4.js
(partial match of "base.min.js")

Token replacement:

<script charset="utf-8" src="base.min.20decb81.js"></script><!-- correct -->
<script charset="utf-8" src="//angular-base.min.20decb81.js"></script><!-- incorrect -->

Second replacement should be

<script charset="utf-8" src="//angular-base.min.ff38c0a4.js"></script>

I'm posting this issue to let you know that we will be publishing Grunt 0.4 on Monday, February 18th.

If your plugin is not already Grunt 0.4 compatible, would you please consider updating it? For an overview of what's changed, please see our migration guide.

If you'd like to develop against the final version of Grunt before Monday, please specify "grunt": "0.4.0rc8" as a devDependency in your project. After Monday's release, you'll be able to use "grunt": "~0.4.0" to actually publish your plugin. If you depend on any plugins from the grunt-contrib series, please see our list of release candidates for compatible versions. All of these will be updated to final status when Grunt 0.4 is published.

Also, in an effort to reduce duplication of effort and fragmentation in the developer community, could you review the grunt-contrib series of plugins to see if any of your functionality overlaps significantly with them? Grunt-contrib is community maintained with 40+ contributors—we'd love to discuss any additions you'd like to make.

Finally, we're working on a new task format that doesn't depend on Grunt: it's called node-task. Once this is complete, there will be one more conversion, and then we'll never ask you to upgrade your plugins to support our changes again. Until that happens, thanks for bearing with us!

If you have any questions about how to proceed, please respond here, or join us in #grunt on irc.freenode.net.

Thanks, we really appreciate your work!

In general plugin is working correctly but there's an annoying error message every time the task is run: "No tasks were registered or unregistered.".
Here's an output from grunt -v:

+ hashres
Loading "hashresHelper.js" tasks...OK
>> No tasks were registered or unregistered.
Loading "hashresUtils.js" tasks...OK
>> No tasks were registered or unregistered.

And here's my hashres config:

hashres: {
    options: {
        fileNameFormat: '${hash}.${ext}'
    },
    build: {
        src: [
                '<%= paths.compiled.js %>/<%= project_name %>.min.js',
                '<%= paths.compiled.css %>/screen.css'
            ],
        dest: 'config/paths.yml'
    }
}

If I specify renameFiles: true in the gruntfile, it does not rename files.

This is because of this line - hashresHelper.js: LIne 27:

renameFiles = renameFiles === undefined? true : false;

it should be:

renameFiles = renameFiles === undefined? true : renameFiles;

@Gissues:{"order":50,"status":"done"}

if I am hashing 2 files

js/users/list.js
js/documents/documentlist.js

and making replacements in
with the format ${hash}.cached.${name}.${ext}

<script src='/js/documents/documentlist.js' />
<script src='/js/users/list.js' />

it will yield a result like

<script src='/js/documents/document47fa3e90.cached.list.js' />
<script src='/js/users/list.js' />

the find and replace looks for exact match and not a match with a delimiting character on either side
if it can be changed to a regex lookup of something like /\W${name}.${ext}\W/

this would not mach documentlist.js when looking for list.js

Hello, thanks for this plugin!

Is possible to have the hash length configurable? Can I make a PR for this?

Using node.js 0.10.26, Grunt 0.4.4 and grunt-hashres 0.4.1 on OS X 10.9.2.

I include two stylesheets in HTML files to have a oldIE fallback in mobile first projects. This means that my hashres task has to rename/map two CSS files, which used to work fine.

Today I noticed that this is no longer the case – both CSS files are renamed properly, but both references in the HTML file are changed to the hash of the first stylesheet, i.e. for

<!--[if lte IE 8]>
    <link rel="stylesheet" href="styles/oldie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="styles/master.css">
 <!--<![endif]-->

the output is

<!--[if lte IE 8]>
    <link rel="stylesheet" href="styles/fe3a671c.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="styles/fe3a671c.css">
 <!--<![endif]-->

which – of course – doesn't work.

Happy to provide further debug info/output, just give me very specific instructions what you need, please.

I'm new to grunt so please forgive me if this is rudimentary.

hashres is updating the assets with a new hash when they change just fine. The first time it ran, it updated the destination file (.cshtml) src's just fine with the newly hashed filenames. But it doesn't update the destination if the hash changes. It still shows the old hash'd filename.

Here is my gruntfile hashres...

hashres: {
          options: {
            encoding: 'utf8',
            fileNameFormat: '${name}.${hash}.${ext}',
            renameFiles: true
          },
          catalog: {
            src: ['build/js/catalog-head.min.js', 'build/js/catalog-body.min.js'],
            dest: ['Views/Shared/_Layout.cshtml']
          },
          login: {
            src: ['build/js/catalog-login.min.js'],
            dest: ['Views/Account/Login.cshtml']
          }
        },

Thanks for any insight

https://github.com/Luismahou/grunt-hashres/blob/41573e47dd5e76372a36d639c2e35335e2160991/README.md#properties

• renameFiles: Rename the files or leave them in place and only alter the references to them in OUT. Defaults to true

I love this project, but I'm seeing it stumble on some images and stick with old filenames that don't exist anymore. Here's my task:

hashres: {
      options: {
        encoding: 'utf8',
        fileNameFormat: '${name}.${hash}.cache.${ext}',
        renameFiles: true
      },
      css: {
        options: {
        },
        src: [
          'dist/css/*.css' ],
        dest: 'dist/*.html'
      },
      js: {
        options: {
        },
        src: [
          'dist/js/*.js'
        ],
        dest: 'dist/*.html'
      },
      images: {
        options: {
        },
        src: [
          'dist/images/*.png',
          'dist/images/*.jpg'
        ],
        dest: [
          'dist/*.html',
          'dist/css/*.css',
          'dist/js/*.js',
          'dist/templates/*.ejs'
        ]
      },
      templates: {
        options: {
        },
        src: [
          'dist/templates/*.ejs'
        ],
        dest: [
          'dist/js/*.js'
        ]
      }
    }

Because of a bug in imagemin, all my images get new hashes on each clean rebuild, and what I'm seeing is for at least one file, it's replacing the image's filename in a .js file with an old hash, and that image file with that old hash doesn't exist anymore. This is with 0.4.0, and I'm going to try going back to 0.3.4. I'm also going to try disabling some of my other tasks, to see if it may be a conflict with concat, uglify, or something else, but it gets most of the files right.

This is starting from a clean build, with no dist folder whatsoever, and the filename with the old hash doesn't exist anywhere in my source tree.

Just wondering why you've hard coded the Grunt dependency to "grunt": "0.4.1", and not "grunt": "^0.4.0",?

The first time my index.html file gets replaced it works like a charm

foo.js gets replaced with abc123.foo.js

But the next time around, it doesn't replace abc123.foo.js with the new hash because it's not the original "foo.js" anymore.

Is it possible to make the src a regex or wildcard so it replaces it each time I run grunt and a new hash is generated?

Can an option added to ignore case when searching for file names during rename operation?

File is: charting.js
For cache busting file is renamed as 52ffe3f4.charting.cache.js
Chart.html refers the file as src= 'Charting.js'

Script file name in Chart.html will not be updated with new name because src has file name with different case than physical file.

In windows world it is becoming very hard to make team to follow and use exact case. As browser treats files in case insensitive manner probably it will benefit lots of users.

References to source map files are not replaced correctly in javascript files.

Source

• main.js
• main.js.map

//# sourceMappingURL=main.js.map

Result

• main.cache.932cf80c.js
• main.js.cache.c3c6e6c9.map

//# sourceMappingURL=main.8c16fa47.js.c3c6e6c9.map

Expected

• main.cache.932cf80c.js
• main.cache.c3c6e6c9.js.map

//# sourceMappingURL=main.cache.c3c6e6c9.js.map