Skip to content

Add support for cachebusting assets #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ferlores wants to merge 1 commit into from
Closed

Add support for cachebusting assets #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 46 additions & 7 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,29 @@ Cartero.prototype.processMains = function( callback ) {

_this.packagePathsToIds[ newPackage.path ] = newPackage.id;

// calculates the shasum for the assets
_this.assetMap = _this.assetMap || {};
async.each( assetTypesToWriteToDisk, function( thisAssetType, nextAssetType ) {
// We dont need to process assets that are in assetTypesToConcatenate
if ( _this.assetTypesToConcatenate.indexOf( thisAssetType ) !== -1 ) return nextAssetType();

async.each( newPackage.assetsByType[ thisAssetType ], function( thisAsset, nextAsset ) {

var fileContent = fs.readFileSync( thisAsset.srcPath, 'utf-8' );
var shasum = crypto.createHash( 'sha1' );

shasum.update(fileContent);

var fileShasum =shasum.digest('hex');
var fileName = path.relative( newPackage.path, thisAsset.srcPath );
var fileExt = path.extname( fileName );
var newFileName = path.basename( fileName, fileExt ) + '_' + fileShasum + fileExt;

// save the old name and new name for later use with the transforms
_this.assetMap[ thisAsset.srcPath ] = newFileName;
});
});

newPackage.addTransform( replaceStringTransform, {
find : /url\(\s*[\"\']?([^)\'\"]+)\s*[\"\']?\s*\)/g,
replace : function( file, match, theUrl ) {
Expand All @@ -417,12 +440,25 @@ Cartero.prototype.processMains = function( callback ) {
if( theUrl.charAt( 0 ) === '/' ) return match;
if( theUrl.indexOf( 'data:' ) === 0 ) return match; // data url, don't mess with this

var absoluteAssetPath = path.resolve( path.dirname( file ), theUrl );
var newAssetName = _this.assetMap[ absoluteAssetPath ];

if ( newAssetName ) {
// replace the url with the new name
theUrl = path.join( path.dirname( theUrl ), newAssetName );
} else {
// this happen when we have packages that have assets references that are not specified
// in the image tag in package.json. It happens in modules like jqueryui
log.warn( file, 'Asset reference ' + theUrl + ' cannot be resolved.' );
}

var cssFilePathRelativeToPackageDir = path.relative( newPackage.path, file );
var cssFileDirPathRelativeToPackageDir = path.dirname( '/' + cssFilePathRelativeToPackageDir );
if( cssFileDirPathRelativeToPackageDir !== '/' ) cssFileDirPathRelativeToPackageDir += '/';

// urls in css files are relative to the css file itself
var absUrl = url.resolve( cssFileDirPathRelativeToPackageDir, theUrl );

absUrl = _this.outputDirUrl + newPackage.id + absUrl;

return 'url( \'' + absUrl + '\' )';
Expand All @@ -431,7 +467,8 @@ Cartero.prototype.processMains = function( callback ) {

newPackage.addTransform( assetUrlTransform, {
packagePathsToIds : _this.packagePathsToIds,
outputDirUrl : _this.outputDirUrl
outputDirUrl : _this.outputDirUrl,
assetMap: _this.assetMap
}, 'style' );

_this.writeIndividualAssetsToDisk( newPackage, assetTypesToWriteToDisk, function( err ) {
Expand Down Expand Up @@ -515,7 +552,8 @@ Cartero.prototype.copyTempBundleToFinalDestination = function( tempBundlePath, a
var postProcessorsToApply = _.clone( _this.postProcessors );
if( assetType === 'script' ) postProcessorsToApply.unshift( function( file ) { return assetUrlTransform( file, {
packagePathsToIds : _this.packagePathsToIds,
outputDirUrl : _this.outputDirUrl
outputDirUrl : _this.outputDirUrl,
assetMap: _this.assetMap
} ); } );

if( postProcessorsToApply.length !== 0 ) {
Expand Down Expand Up @@ -683,17 +721,17 @@ Cartero.prototype.resolvePostProcessors = function( postProcessorNames, callback

Cartero.prototype.writeIndividualAssetsToDisk = function( thePackage, assetTypesToWriteToDisk, callback ) {
var _this = this;
var pathsOfWrittenAssets = [];
var outputDirectoryPath = this.getPackageOutputDirectory( thePackage );

assetTypesToWriteToDisk = _.intersection( assetTypesToWriteToDisk, Object.keys( thePackage.assetsByType ) );

async.each( assetTypesToWriteToDisk, function( thisAssetType, nextAssetType ) {
async.each( thePackage.assetsByType[ thisAssetType ], function( thisAsset, nextAsset ) {
var thisAssetDstPath = path.join( outputDirectoryPath, path.relative( thePackage.path, thisAsset.srcPath ) );
if( thisAssetType === 'style' ) thisAssetDstPath = renameFileExtension( thisAssetDstPath, '.css' );

pathsOfWrittenAssets.push( thisAssetDstPath );
var thisAssetDstPath = path.relative( thePackage.path, thisAsset.srcPath );
thisAssetDstPath = path.join( outputDirectoryPath, path.dirname( thisAssetDstPath ), _this.assetMap[ thisAsset.srcPath ] );

if( thisAssetType === 'style' ) thisAssetDstPath = renameFileExtension( thisAssetDstPath, '.css' );

thisAsset.writeToDisk( thisAssetDstPath, function( err ) {
if( err ) return nextAsset( err );
Expand Down Expand Up @@ -760,7 +798,8 @@ Cartero.prototype.writeMetaDataFile = function( callback ) {
var metaData = JSON.stringify( {
formatVersion : 2,
packageMap : packageMap,
entryPointMap : entryPointMap
entryPointMap : entryPointMap,
assetMap: _this.assetMap
}, null, 4 );

fs.writeFile( metaDataFilePath, metaData, function( err ) {
Expand Down
Empty file added test/example4/node_modules/my-module/index.js
View file
Open in desktop
Empty file.
Empty file added test/example4/node_modules/my-module/package.json
View file
Open in desktop
Empty file.
Empty file added test/example4/node_modules/my-module/style.css
View file
Open in desktop
Empty file.
1 change: 1 addition & 0 deletions test/example4/static/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
assets/
1 change: 1 addition & 0 deletions test/example4/views/page1/img/robot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions test/example4/views/page1/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"view" : "page1.jade",
"main" : "page1.js",
"style" : "*.css",
"image": "img/robot.png"
}
3 changes: 3 additions & 0 deletions test/example4/views/page1/page1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background : blue url('./img/robot.png');
}
Empty file added test/example4/views/page1/page1.jade
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions test/example4/views/page1/page1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
console.log( 'hellooo dave' );

var robotPngPath = '##asset_url( "./img/robot.png" )';
53 changes: 49 additions & 4 deletions test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,13 +148,13 @@ test( 'example3', function( t ) {
page1JsBundle = path.join( outputDirPath, parcelIdsByPath[ 'page1' ], page1JsBundle );

var page1JsContents = fs.readFileSync( page1JsBundle, 'utf8' );
t.ok( page1JsContents.indexOf( '/' + commonJsPackageId + '/robot.png' ) !== -1, '##asset_url resolved' );
t.ok( page1JsContents.indexOf( '/' + commonJsPackageId + '/robot_9018f21e83ce46f3ea2e3b73e5d75ece75407df7.png' ) !== -1, '##asset_url resolved' );

var page1CssBundle = _.find( page1PackageFiles, function( thisFile ) { return path.extname( thisFile ) === '.css'; } );
page1CssBundle = path.join( outputDirPath, parcelIdsByPath[ 'page1' ], page1CssBundle );

var page1CssContents = fs.readFileSync( page1CssBundle, 'utf8' );
t.ok( page1CssContents.indexOf( '/' + commonJsPackageId + '/robot.png' ) !== -1, 'relative css url resolved' );
t.ok( page1CssContents.indexOf( '/' + commonJsPackageId + '/robot_9018f21e83ce46f3ea2e3b73e5d75ece75407df7.png' ) !== -1, 'relative css url resolved' );
t.ok( page1CssContents.indexOf( 'background : blue' ) !== -1, 'page 1 has correct background color' );

var page2CssBundle = _.find( page2PackageFiles, function( thisFile ) { return path.extname( thisFile ) === '.css'; } );
Expand All @@ -165,9 +165,54 @@ test( 'example3', function( t ) {

t.ok( _.contains(
fs.readdirSync( path.join( outputDirPath, commonJsPackageId ) ).sort(),
'robot.png'
'robot_9018f21e83ce46f3ea2e3b73e5d75ece75407df7.png'
), 'robot.png in common package' );
} );
} );


test( 'example4', function( t ) {
t.plan( 5 );

var viewDirPath = path.join( __dirname, 'example4/views' );
var outputDirPath = path.join( __dirname, 'example4/static/assets' );
var packageId;
var packageMap = {};

var c = cartero( viewDirPath, outputDirPath, {} );

c.on( 'packageCreated', function( newPackage ) {
if( newPackage.isParcel ) {
packageId = newPackage.id;
}

packageMap[ newPackage.path ] = newPackage.id;
} );

c.on( 'done', function() {
var cssFile = 'page1_bundle_4273a80ea2aae6c0bf34f29e35ce44fa62d0350d.css';
var jsFile = 'page1_bundle_3724c795521b651182d503e8fe77654c3d86019d.js';
var imgDir = 'img';
var imgFile = 'robot_9018f21e83ce46f3ea2e3b73e5d75ece75407df7.png';

t.ok( fs.existsSync( path.join( outputDirPath, packageId, imgDir, imgFile ) ), 'robot.png created with the new name' );

t.deepEqual(
fs.readdirSync( path.join( outputDirPath, packageId ) ).sort(),
[ 'assets.json', cssFile, jsFile, imgDir ].sort()
);

t.deepEqual(
fs.readdirSync( path.join( outputDirPath, packageId, 'img') ),
[ imgFile ]
);

// Test content of js file and check #asset_url
var jsContent = fs.readFileSync( path.join( outputDirPath, packageId, jsFile ), 'utf8' );
t.notEqual( jsContent.indexOf( 'var robotPngPath = \'/' + [ packageId, imgDir, imgFile ].join( '/' ) + '\';' ), -1 );

t.equal( fs.readFileSync( path.join( outputDirPath, packageId, cssFile ), 'utf8' ),
'body {\n\tbackground : blue url( \'/' + [ packageId, imgDir, imgFile ].join( '/' ) + '\' );\n}' );

} );
} );
8 changes: 7 additions & 1 deletion transforms/asset_url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,17 @@ module.exports = function( file, options ) {
var url = pathMapper( assetSrcAbsPath, function( srcDir ) {
return options.packagePathsToIds[ srcDir ] ? '/' + options.packagePathsToIds[ srcDir ] : null; // return val of outputDirPath needs to be absolute path
} );

// all assets urls should be different than their paths.. otherwise we have a problem
if( url === assetSrcAbsPath )
return _this.emit( 'error', new Error( 'The file "' + assetSrcAbsPath + '" referenced from ##asset_url( "' + assetSrcPath + '" ) in file "' + file + '" is not an asset.' ) );

// TODO: shall we fix path-mapper instead of doing this?
var filename = path.basename(assetSrcAbsPath);
var newFilename = options.assetMap[assetSrcAbsPath];

url = url.replace(filename, newFilename);

Copy link
Contributor Author

@ferlores ferlores Oct 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change felt a bit weird, shall we update pathMapper?

if( options.outputDirUrl ) {
var baseUrl = options.outputDirUrl;

Expand Down