“I'm an experienced web developer and software engineer. Welcome to my blog. If you need to reach out you can continue the conversation with a tweet to @geedew. I hope you find what you are looking for here. You can also find me on Github and StackOverflow.”

Using GruntJS to sync with Amazon's S3

S3 continues as a great place to host static files for web use. It’s relatively cheap, has a good uptime and when integrated with Cloudfront it becomes a full content delivery network (CDN) with many geo-located edge servers. Getting development files to S3 and what to do once they are there makes for a long day and should never be manual process. I have a setup that I use on personal projects and at work that solves a majority of the problems ever faced with using S3 in development for static cached files. Previously I was using bash-fu or Phing for this, but recently switched to NodeJS.

A quick example config for uploading files to S3 in Grunt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
cfg['s3'] = {
options: {
key: cfg.Ss.s3.key,
secret: cfg.Ss.s3.secret,
bucket: cfg.Ss.s3.bucket,
access: 'public-read',
headers: {
// Two Year cache policy (1000 * 60 * 60 * 24 * 730)
'Cache-Control': 'max-age=630720000, public',
'Expires': new Date(Date.now() + 63072000000).toUTCString()
}
},
prod: {
sync: [{
// The regular js files
src: path.join(cfg.Ss.path.release, 'build/cdn/js/**/*.js'),
dest: 'js',
rel: path.join(cfg.Ss.path.release, 'build/cdn/js')
}, {
// The gzip js files
src: path.join(cfg.Ss.path.release, 'build/cdn/js/**/*.js'),
dest: 'jsgz',
rel: path.join(cfg.Ss.path.release, 'build/cdn/js'),
options: { gzip: true }
}, {
// The regular css files
src: path.join(cfg.Ss.path.release, 'build/cdn/css/**/*.css'),
dest: 'css',
rel: path.join(cfg.Ss.path.release, 'build/cdn/css')
}, {
// The gzip css files
src: path.join(cfg.Ss.path.release, 'build/cdn/css/**/*.css'),
dest: 'cssgz',
rel: path.join(cfg.Ss.path.release, 'build/cdn/css'),
options: { gzip: true }
} ]
}
};

Read More