Practical Project: Managing Development Environment with Gemini CLI
Through this chapter's practical project, you will:
- Clean up redundant dependencies and free up disk space
- Optimize system PATH configuration
- Establish an efficient AI-assisted workflow
- Learn to manage multiple development project environments
Course Video
Watch the complete teaching video for Lessons 1 and 2:
Project 1: Intelligent Environment Cleanup
Many developers' computers have accumulated a large number of unused dependencies and tools. Let's use Gemini CLI for a thorough cleanup.
Project Background
Real Case Study
A developer successfully cleaned up 50GB of redundant files after using Gemini CLI, including:
- Outdated node_modules folders
- Duplicate global npm packages
- Abandoned development tools
- Temporary build files
Practice Steps
- Step 1: Environment Scan
- Step 2: Identify Redundancy
- Step 3: Execute Cleanup
Comprehensive Local Environment Scan
gemini chat
You: Please help me scan all local development environments, dependencies, and libraries, list detailed inventory
Gemini: Starting to scan your development environment...
📊 Scan Results:
1. Node.js Environment:
- Versions: v18.17.0, v16.20.0, v14.21.0
- Global packages: 87 (using 2.3GB)
2. Python Environment:
- Versions: 3.9.7, 3.8.10, 2.7.18
- pip packages: 156 (using 4.1GB)
3. Project Folders:
- Detected 23 projects
- node_modules total: 18.7GB
- Unused for over 6 months: 12 projects
4. Development Tools:
- Docker images: 34 (using 12.3GB)
- VS Code extensions: 48
Which part would you like me to analyze in detail?
Intelligently Identify Items to Clean
You: Analyze what redundant content can be safely deleted
Gemini: Based on analysis, the following content can be safely deleted:
🗑️ Cleanable Items (estimated to free up 32.4GB):
1. Outdated Node.js Versions:
❌ v14.21.0 - Maintenance ended
✅ Keep v18.17.0 (LTS)
2. Duplicate Global npm Packages:
❌ [email protected] - Use npx instead
❌ [email protected] - Better to install at project level
❌ [email protected] - Unused for a long time
3. Abandoned Project node_modules:
❌ ~/projects/old-todo-app (1.2GB)
❌ ~/projects/test-project-2022 (2.1GB)
❌ ~/experiments/abandoned-blog (1.8GB)
4. Docker Cleanup:
❌ 12 dangling images (4.2GB)
❌ 8 stopped containers (1.1GB)
⚠️ Recommended to Keep:
✅ Projects used in the last 3 months
✅ Production environment related tools
✅ Personal configuration files
Shall I start the cleanup?
Safely Execute Cleanup Operations
You: Okay, please help me execute the cleanup, but backup important configurations first
Gemini: Wise choice! I'll backup important configurations before cleaning.
📦 Backup Phase:
✓ Created backup directory ~/gemini-backup-2025-01-20
✓ Backed up .npmrc, .gitconfig
✓ Backed up VS Code settings
✓ Exported installed package list
🧹 Starting Cleanup:
[1/5] Uninstalling outdated Node.js versions...
✓ Removed v14.21.0
[2/5] Cleaning global npm packages...
✓ Uninstalled create-react-app
✓ Uninstalled [email protected]
✓ Uninstalled gulp-cli
Freed: 856MB
[3/5] Deleting abandoned projects...
✓ Deleted old-todo-app/node_modules
✓ Deleted test-project-2022/node_modules
✓ Deleted abandoned-blog/node_modules
Freed: 5.1GB
[4/5] Docker cleanup...
✓ Deleted dangling images
✓ Deleted stopped containers
Freed: 5.3GB
[5/5] Cleaning system cache...
✓ npm cache cleaned
✓ pip cache cleaned
Freed: 1.2GB
🎉 Cleanup Complete!
Total space freed: 32.4GB
Backup location: ~/gemini-backup-2025-01-20
Project Results
Space Freed: 32.4GB / 50GB — Successfully cleaned redundant files
Performance Improvement
- npm command response speed improved by 40%
- System boot time reduced by 15 seconds
- Development tools run more smoothly
Project 2: PATH Environment Optimization
Messy PATH configuration can lead to command conflicts and performance issues. Let's use AI to optimize it.
Common PATH Problems
- Duplicate Paths: The same path is added multiple times, affecting lookup efficiency
- Invalid Paths: Pointing to non-existent directories, causing command lookup failures
- Order Confusion: Improper priority settings may use wrong tool versions
Optimization Practice
- Analyze PATH
- Execute Optimization
- Verify Results
You: Help me analyze the system PATH and find all problems
Gemini: Analyzing your PATH configuration...
🔍 PATH Analysis Report:
Current PATH entries (in order):
1. /usr/local/bin ⚠️
2. /opt/homebrew/bin ✅
3. /usr/local/bin ⚠️ [Duplicate]
4. ~/.npm-global/bin ✅
5. /usr/bin ✅
6. /opt/old-tools/bin ❌ [Does not exist]
7. ~/.npm-global/bin ⚠️ [Duplicate]
8. /usr/local/go/bin ✅
9. /Applications/Docker.app/Contents/Resources/bin ❌ [Docker not installed]
10. /usr/local/bin ⚠️ [3rd duplicate]
📊 Problem Summary:
- 3 duplicate entries
- 2 invalid paths
- Recommended to adjust priority order
🎯 Optimization Recommendations:
1. User-level tools should take priority over system-level
2. Commonly used tool paths should be at the front
3. Remove all duplicate and invalid entries
You: Please help me optimize PATH configuration
Gemini: I'll help you optimize PATH configuration.
📝 Optimization Plan:
New PATH order (from highest to lowest priority):
1. ~/.local/bin # User custom scripts
2. /opt/homebrew/bin # Homebrew (macOS)
3. ~/.npm-global/bin # npm global packages
4. /usr/local/go/bin # Go language
5. /usr/local/bin # Local installations
6. /usr/bin # System commands
🔧 Applying changes...
Detected you're using zsh, updating ~/.zshrc:
✓ Backed up original .zshrc to .zshrc.backup
✓ Cleaned up duplicate export PATH statements
✓ Added optimized PATH configuration
✓ Added comments explaining each path's purpose
# Optimized configuration
export PATH="$HOME/.local/bin:$PATH"
export PATH="/opt/homebrew/bin:$PATH"
export PATH="$HOME/.npm-global/bin:$PATH"
export PATH="/usr/local/go/bin:$PATH"
🎉 Optimization complete!
Run the following command to apply changes:
source ~/.zshrc
Or reopen your terminal window.
You: Verify PATH optimization results
Gemini: Let me verify the optimized PATH configuration...
✅ Verification Results:
1. Duplicate check:
✓ No duplicate paths
2. Validity check:
✓ All paths exist and are accessible
3. Command availability test:
✓ node: /opt/homebrew/bin/node (v18.17.0)
✓ npm: /opt/homebrew/bin/npm (v9.8.1)
✓ git: /usr/bin/git (v2.39.3)
✓ python: /usr/bin/python3 (v3.11.6)
✓ go: /usr/local/go/bin/go (v1.21.5)
4. Performance test:
Command lookup time:
Before optimization: average 23ms
After optimization: average 8ms
⚡ 65% improvement!
5. Potential conflict check:
✓ No command version conflicts detected
🎊 PATH optimization successful! Your development environment is now more efficient.
Project 3: Git Workflow Automation
Say goodbye to tedious Git commands and let AI handle all version control operations.
Scenario Practice
- Daily Development
- Resolve Conflicts
- Code Review
Scenario: Starting Work in the Morning
You: Good morning, I want to continue yesterday's feature development
Gemini: Good morning! Let me help you prepare the development environment.
🔍 Checking project status...
📊 Project: awesome-web-app
📍 Current branch: feature/user-auth
📝 Uncommitted changes: 3 files
Yesterday's work summary:
- Completed login form UI
- Added form validation logic
- TODO: Connect backend API
Today's recommendations:
1. First commit yesterday's changes
2. Pull latest code from main branch
3. Continue API integration work
Would you like me to execute these operations for you?
You: Okay, first commit yesterday's changes
Gemini: Committing your changes...
Viewing change content:
- src/components/LoginForm.jsx (new)
- src/utils/validation.js (new)
- src/styles/auth.css (new)
Generated commit message:
"feat: Implement user login form UI and validation logic
- Create responsive login form component
- Add email and password validation rules
- Apply custom style theme"
✓ Changes committed
✓ Pushed to remote repository
Now pulling latest code...
✓ Main branch updated, no conflicts
You can start today's development!
Scenario: Handling Merge Conflicts
You: Pull and merge main branch code
Gemini: Executing merge operation...
⚠️ Merge conflict detected!
Conflict files:
1. src/config/api.js
2. package.json
Let me help you analyze the conflicts:
📄 src/config/api.js conflicts:
<<<<<<< HEAD (Your changes)
const API_BASE = 'http://localhost:3000/api'
const AUTH_ENDPOINT = '/auth/login'
=======
const API_BASE = 'https://api.example.com'
const AUTH_ENDPOINT = '/v2/auth/signin'
>>>>>>> main
Analysis: It looks like the main branch updated the API address to production environment.
Suggested solution:
const API_BASE = process.env.REACT_APP_API_URL || 'http://localhost:3000/api'
const AUTH_ENDPOINT = '/v2/auth/signin'
This supports both development and production environments.
Would you like to apply this solution?
You: Apply the suggested solution
Gemini: Resolving conflicts...
✓ Updated src/config/api.js
✓ Resolved package.json (kept new dependencies from both sides)
Conflicts resolved! Now committing merge results...
✓ Merge commit completed
✓ Pushed to remote repository
Your branch is now in sync with the main branch!
Scenario: Preparing for Code Review
You: I've completed the user authentication feature, help me prepare for code review
Gemini: Okay, I'll help you prepare for code review.
📋 Feature Development Summary:
Branch: feature/user-auth
Commits: 8
Files modified: 15
Code added: +542 lines
Code deleted: -87 lines
🔍 Code Quality Check:
1. Code Standards:
✓ ESLint checks passed
✓ Formatting meets standards
2. Test Coverage:
⚠️ Current coverage: 72%
Suggestion: Add test cases for error handling
3. Security Check:
✓ No hardcoded keys found
✓ API calls use HTTPS
⚠️ Suggestion: Add request rate limiting
4. Performance Considerations:
✓ Components optimized with React.memo
✓ API requests have appropriate caching
📝 Generated PR Description:
## Overview
Implemented complete user authentication functionality, including login, registration, and session management.
## Changes
- ✨ Added login/registration form components
- 🔒 Implemented JWT token management
- 🎨 Added authentication-related UI styles
- ⚡ Optimized API request performance
## Testing
- Unit test coverage 72%
- Manually tested various edge cases
- Compatibility tests passed
## Screenshots
[Auto-generated feature screenshots]
Would you like to create a Pull Request?
Project 4: Building Personal Workflow
Every developer has unique work habits. Let's use Gemini CLI to create a customized automated workflow.
Custom Command Set
Example 1: Project Initialization Assistant
You: Create a new React project using TypeScript with my commonly used configurations
Gemini: Understood! I'll create a React TypeScript project that matches your preferences.
🚀 Initializing project...
Execution steps:
1. Create React TypeScript application
2. Install your commonly used dependency packages
3. Configure code standards tools
4. Set up Git repository
npx create-react-app my-app --template typescript
cd my-app
📦 Installing additional dependencies...
- axios (HTTP requests)
- react-router-dom (routing)
- @mui/material (UI components)
- react-hook-form (form handling)
⚙️ Configuring development tools...
✓ Added .prettierrc
✓ Configured ESLint rules
✓ Created .vscode/settings.json
✓ Set up Git hooks (husky)
📁 Creating project structure...
src/
├── components/
├── pages/
├── services/
├── hooks/
├── utils/
├── types/
└── styles/
✓ Project creation complete!
All your common settings have been configured.
Run 'npm start' to begin development!
Example 2: Deployment Assistant
You: Deploy this project to Vercel
Gemini: I'll help you deploy to Vercel!
🔍 Checking project configuration...
✓ Detected React application
✓ build command: npm run build
✓ output directory: build/
📝 Creating Vercel configuration...
Generated vercel.json:
{
"buildCommand": "npm run build",
"outputDirectory": "build",
"framework": "create-react-app"
}
🚀 Starting deployment...
1. Connecting Git repository
2. Triggering Vercel build
3. Assigning domain name
Build log:
[10:23:15] Cloning repository...
[10:23:18] Installing dependencies...
[10:23:45] Building project...
[10:24:12] Optimizing assets...
[10:24:20] Deployment complete!
✅ Deployment successful!
🌐 Access URLs:
- Production: https://my-app.vercel.app
- Preview: https://my-app-git-main.vercel.app
📊 Deployment Info:
- Build time: 65 seconds
- Deployment region: Global CDN
- SSL certificate: Automatically configured
Would you like to configure a custom domain?
Efficiency Improvement Data
Advanced Tips
Batch Operations
You: Check dependency update status for all my projects
Gemini: Scanning all your projects...
Found 12 projects, starting dependency update check:
📦 project-1: awesome-web-app
⚠️ 3 major updates available
- react: 18.2.0 → 18.3.0
- typescript: 5.0.4 → 5.3.3
- vite: 4.4.9 → 5.0.11
📦 project-2: api-server
✅ All dependencies are up to date
📦 project-3: mobile-app
⚠️ 5 updates available
[Detailed list...]
Summary:
- 8 projects have available updates
- 4 projects have up-to-date dependencies
- Estimated update time: approximately 15 minutes
Should I batch update all projects? (Will run tests first to ensure compatibility)
Intelligent Debugging
You: My application failed to start, help me diagnose
Gemini: I'll help you diagnose the problem.
🔍 Collecting error information...
Found error:
Error: Cannot find module '@/components/Header'
🔧 Diagnosis Result:
Problem: Module path alias configuration error
Cause: TypeScript and Webpack path aliases are inconsistent
Solution:
1. Update tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
2. Ensure webpack.config.js has synchronized configuration:
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
Would you like me to automatically fix this problem?
Course Summary
Skills You've Mastered
✓Environment Management
Intelligently clean and optimize development environment ✓
Git Automation
Complete version control with natural language ✓
Workflow Optimization
Create personalized efficient workflows ✓
Problem Diagnosis
Quickly locate and resolve development issues
Next Step Recommendations
- Continuous Optimization: Constantly adjust AI assistant behavior based on daily use
- Share Experience: Share your best practices with the community
- Explore More: Try applying Gemini CLI to more scenarios
Congratulations on Completing the Course!
You have successfully mastered all core skills for managing local development environments using Gemini CLI. Now you can:
- Efficiently manage and optimize development environments
- Automate daily development tasks with AI
- Build workflows that suit you
- Quickly resolve development problems
Course Complete!
Thank you for attending Chan Meng's AI Programming Public Course. Looking forward to seeing you create excellent works using these skills!