Editing Animation Background Portfolio Previews (section)

=== Set up ===

Create a base `package.json` file in the directory holding the background assets.

<syntaxhighlight lang="javascript">
{
	"name": "my-project-name",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "~0.4.5",
	}
}
</syntaxhighlight>

Install the `grunt-contrib-watch` and `grunt-sync` packages in the same directory.

<syntaxhighlight lang="powershell">
npm install grunt-contrib-watch --save-dev
npm install grunt-sync --save-dev
</syntaxhighlight>

Create a `gruntfile.js` to define the workflow.

<syntaxhighlight lang="javascript">
module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		watch: {
			previews: {
				files: ['**/*.jpg', '**/*.png', '**/*.gif'],
				tasks: ['sync:previews'],
			},
		},
		sync: {
			previews: {
				files: [
					{expand: true, src: ['**/*.jpg', '**/*.png', '**/*.gif'], dest: 'd:/cloud/Google Drive/creative/animation/portfolio/backgrounds/', flatten: true},
				],
				updateAndDelete: false
			}
		}
	});

	// load necessary grunt modules
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-sync');

	// Default task(s).
	grunt.registerTask('default', ['watch']);
};
</syntaxhighlight>

* The `watch` task triggers the `sync` task whenever any web images are added or updated.
* The `sync` task copies the web images to the root of the local cloud directory.
* The cloud service (e.g. Google Drive) syncs the contents of the local directory with the web directory.