Apache Cordova is a popular open-source framework for building cross-platform mobile applications. As developers, we're constantly looking for ways to streamline our workflow and improve our project's overall quality. One often overlooked feature in Apache Cordova is the use of hooks – scripts that can be run at various stages of the build process. In this article, we'll explore how to create a simple Apache Cordova hook using Node.js to remove temporary files from your project.
Before diving into the code, let's take a step back and look at what hooks are all about. According to the Apache Cordova documentation, there are thirty-two different hook types that can be used to customize the build process. For this example, we'll focus on creating a before_prepare hook that removes temporary files from our project.
To get started, let's create a fresh Apache Cordova project for Android or iOS:
cordova create TestProject com.nraboy.testproject TestProject
cd TestProject
cordova platform add android
cordova platform add ios
Note that if you're not using a Mac, you cannot add and build for the iOS platform.
Now that we have our project set up, let's create a before_prepare hook in Node.js. In the hooks directory at the root of your project, create a new directory called before_prepare. Any script to be run before preparing our files will be placed in this directory. Scripts in the hooks/before_prepare directory will execute in an order based on their file name.
Our junk clean up script should be one of the first ones run, so let's create a file named 01_junkcleanup.js in the before_prepare directory. A common problem with Apache Cordova hooks is that they require certain file permissions on Linux and Mac operating systems. Without the execute permission, they will not run.
To make sure we have the correct permissions, execute the following command:
chmod 777 hooks/before_prepare/01_junkcleanup.js
Now it's time to add some code to our script!
#!/usr/bin/env node
var fs = require('fs');
var path = require('path');
var foldersToProcess = [
"js",
"css"
];
foldersToProcess.forEach(function(folder) {
processFiles("www/" + folder);
});
function processFiles(dir) {
fs.readdir(dir, function(err, list) {
if(err) {
console.log('processFiles err: ' + err);
return;
}
list.forEach(function(file) {
file = dir + '/' + file;
fs.stat(file, function(err, stat) {
if(!stat.isDirectory()) {
switch(path.basename(file)) {
case ".DS_Store":
fs.unlink(file, function(error) {
console.log("Removed file " + file);
});
break;
case "Thumbs.db":
fs.unlink(file, function(error) {
console.log("Removed file " + file);
});
break;
default:
console.log("Skipping file " + file);
break;
}
}
});
});
}
Let's break down what the above script means. The var foldersToProcess = [ "js", "css" ]; line specifies which directories in our project we want to clean up (in this case, js and css). The processFiles(dir) method loops through each file found in the directory, including subdirectories.
The switch statement determines which files get deleted or skipped. By default, the files will not be touched, but if anything shows up in our switch that is not considered default, it will be unlinked / deleted from the file system.
The Apache Cordova hook we just created will be run under multiple circumstances. We can execute it directly by running cordova prepare from the command line or by running cordova build [platform] since the build process makes a call to the prepare scripts as well.
To re-iterate, this particular hook will get rid of temporary files or garbage that gets placed by the operating system.