[UPDATE] CodeKit 3 is now available and hooks work a bit differently now. This “should” still work, but, I’ll try to have an update on this using the new hooks.

Here is another quick post on using the new Hook variables added in CodeKit 2.3, this time looking at adding timestamps to CSS files.

Even though this is focused on SCSS/CSS you should be able to take this example and modify it to work with any of the other preprocessing abilities CodeKit has to offer. The main take away is, adding a unique placeholder for the timestamp in your source files and using sed to replace it with a real timestamp when they’re processed by CodeKit.

The hook settings used are:

  • Any of the following are true
  • The filename of any processed file ends with .scss

Then, we’ll need to select Shell Script (/bin/sh) from the select box.

Once that’s all set add the following to the textarea:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# set CK_OUTPUT_PATHS to an empty string if it is not present
${CK_OUTPUT_PATHS:=""}

# split string into an array via ':'
CK_OUTPUT_PATHS=(${CK_OUTPUT_PATHS//:/ })

now=$(date)

for i in "${CK_OUTPUT_PATHS[@]}"  
do  
    sed -i '' -e "s/{{TIMESTAMP}}/${now}/" "$i"
done

We’re creating the timestamp with now=$(date) so if you wish to tweak the timestamp format you can find more information here.

The line sed -i -e "s/{{TIMESTAMP}}/${now}/" "$i" is using sed to execute a find/replace inline so that we overwrite the current file $i with the timestamp we created above. Right now the script is expecting to find {{TIMESTAMP}} somewhere within the CSS file so that it can replace it.

So your SCSS file could look something like:

site.scss
1
2
3
4
5
6
7
8

/* {{TIMESTAMP}} */
@import 'somthing';
@import 'more';

body{  
  ...
}

and you will end up with a CSS file like:

site.css
1
2
3
4
5
6
7
8
9
10
11
12

/* Sun Apr 26 09:52:32 EDT 2015 */
.something-css-here{
    ...
}
.more-css-here{
    ...
}

body{
    ...
}