Back to home

Migrate assets files into css file with urldata

Intro

There is a project's dependences have been shutdown. The other project can't work that have some refs of the shutdown project.
I'm do some script to migrate the depend files into the can't work project.

change the statics file refs

$ sed -i 's#\(<script .\+\)http://HOST/assets/#\1/js/#p' *.html

embed the assets into css file

for i in $(grep -R --color -o -e "/CSS/ASSET/REF/[^'\")]\+" *.css);
  do 
    ii=${i##*/};
    BS=`base64 "/PATH/TO/THE/ALL/IMAGES/"$ii` ;
    sed -n "s#\"${i#*:}\"#data:image/${i##*.},$BS#p" *.css ;
done

Tips:

$ export i=grep -R --color -o -e "/CSS/ASSET/REF/[^'\")]\+" *.css 
global.css:/assets/common/global_sprite.png

# Get file path from grep result
$ echo ${i#*:}
/assets/common/global_sprite.png

# Get file postfix to build UrlData 
$ echo ${i##*.}
png

When I get all image asset refs, I aware those refs have some repeat in multi css files. That means use the urldata is not a good idea.
I'm only move the ref files into the project and replace the ref path.

for i in $(grep -R --color -o -e "/CSS/ASSET/REF/[^'\")]\+" *.css); 
  do 
    ii=${i##*/}; 
    cp "/PATH/TO/THE/ALL/IMAGES/"$ii ../images/; 
    sed -i "s#${i#*:}#/images/$ii#p" *.css ; 
done


  background:url('/images/icons.png') no-repeat;
  background:url('/images/progress_arrow.png') 0 -100px no-repeat;
  background: url('/images/page_arrow.png') no-repeat;
  background: url('/images/resizable.png') no-repeat;
  background: transparent url('/images/box_mask_bg.png')\0/;
  *background: transparent url('/images/box_mask_bg.png');
  background: transparent url('/images/box_mask_bg.png')\0/;
  *background: transparent url('/images/box_mask_bg.png');
  background: transparent url('/images/box_tooltip_arrow.png') no-repeat;
  *background:transparent url('/images/ie_arrow.png') no-repeat;
  background:transparent url('/images/ie_arrow.png') no-repeat\0/;
  *background:transparent url('/images/ie_arrow.png') no-repeat;
  background:transparent url('/images/ie_arrow.png') no-repeat\0/;
  background: url("/images/left_disabled.png") no-repeat;
  background: url("/images/right_enabled.png") no-repeat;
  background: url("/images/right_disabled.png") no-repeat;

References