Add Gulp for Autoprefixer and PostCSS

.gitignore

@@ -1,4 +1,8 @@
 # misc
-.DS_Store
+**/.DS_Store
 *.pem
-*.zip
+*.zip
+node_modules
+.cache
+package-lock.json
+dist/

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"trailingComma": "es5",
+	"tabWidth": 2,
+	"semi": false,
+	"singleQuote": true
+}

README.md

@@ -24,4 +24,11 @@ Speed Up Your Development Workflow
 
 For developers, every second counts. Why squint at unformatted JSON when you can view, interact, and even edit it seamlessly? With JSON Formatter, you're not just reading data; you're experiencing it. Whether you're debugging, analyzing, or just curious, our tool is designed to speed up your workflow.
 
-Install JSON Formatter today and transform chaos into clarity!
+Install JSON Formatter today and transform chaos into clarity!
+
+## Getting Started
+
+1. Run `npm install` to install the required dependencies.
+2. Run `npm run dev` to watch the file changes.
+3. Load `dist` as the unpacked extension during the development.
+4. Run `npm run build` to build the file for distribution.

gulpfile.js

@@ -0,0 +1,34 @@
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const postcssNested = require('postcss-nested');
+const cssmin = require('gulp-cssmin');
+
+const srcFiles = [
+	'src/content.js',
+	'src/manifest.json',
+	'src/fonts/**/*',
+	'src/icons/**/*',
+];
+
+function copyAll() {
+	return gulp
+		.src(srcFiles, { base: './src/' })
+		.pipe(gulp.dest('dist'));
+}
+
+function processCSS() {
+	const plugins = [autoprefixer(), postcssNested()];
+
+	return gulp
+		.src('src/styles.css')
+		.pipe(postcss(plugins))
+		.pipe(cssmin())
+		.pipe(gulp.dest('dist'));
+}
+
+gulp.task('build', gulp.series(copyAll, processCSS));
+gulp.task('watch', function () {
+	gulp.watch(srcFiles, copyAll);
+	gulp.watch('src/styles.css', processCSS);
+});

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "jsonformatter",
+  "version": "1.0.0",
+  "description": "A simple, clean, functional JSON formatter for Chrome",
+  "scripts": {
+    "dev": "gulp watch",
+    "build": "gulp build"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.16",
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^9.0.1"
+  },
+  "devDependencies": {
+    "gulp-cssmin": "^0.2.0",
+    "postcss-nested": "^6.0.1"
+  }
+}