The Problem
I recently worked on a Node.js project were we were doing our development on Windows 7 machines, but the actual hosting was being done with Cloud Foundry (running Linux). This website contained a number of graphical images, which appeared correctly on our Windows 7 development machines, but when we deployed our application to Cloud Foundry, a number of the images would not appear. The cause for this discrepancy between environments was Linux is a case sensitive operating system, but Windows is not case sensitive.The Quick Solution
To resolve this issue we went through our code and verify the case of the filenames matched any references to those files in our source code.Preventing the Issue
We wanted to prevent an issue like this from happening again, so we decided to institute a naming convention for all of our image files. In our case we decided to make them all lower case. To enforce this convention we used the gulp-check-file-naming-convention (see https://github.com/HAKASHUN/gulp-check-file-naming-convention for more details) gulp plugin by HAKASHUN.The following is a simple gulp example showing how this plugin can be used:
1 2 3 4 5 6 7 | const gulp = require('gulp'); const fileNamingConventionChecker = require("gulp-check-file-naming-convention"); gulp.task('default', function() { gulp.src("./public/**/*") .pipe(fileNamingConventionChecker({ caseName: 'lowerCase' })); }); |
The error message that is generated by this gulp plugin will look something like the following:
[08:27:59] Using gulpfile ~\Source\git\app\gulpfile.js
[08:27:59] Starting 'default'...
[08:27:59] Finished 'default' after 11 ms
events.js:160
throw er; // Unhandled 'error' event
^
Error: Invalid file name at ←[31mC:\Users\NAME\Source\git\app\public
\img\SquareProfile.jpg←[39m :
> ←[32msquareprofile.jpg←[39m is valid.
