compile-css 1.0.0 → 1.0.1

package/.vscode.example/launch.json

@@ -0,0 +1,14 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "port": 9003
+        }
+    ]
+}

package/.vscode.example/sessions.json

@@ -0,0 +1,30 @@
+{
+    "$schema": "https://cdn.statically.io/gh/nguyenngoclongdev/cdn/main/schema/v11/terminal-keeper.json",
+    "theme": "tribe",
+    "active": "default",
+    "activateOnStartup": true,
+    "keepExistingTerminals": false,
+    "sessions": {
+        "default": [
+            {
+                "name": "cmd",
+                "autoExecuteCommands": false,
+                "icon": "person",
+                "color": "terminal.ansiGreen",
+                "commands": []
+            },
+            [
+                {
+                    "name": "compileCss",
+                    "commands": [
+                        "npm run compileCss"
+                    ]
+                },
+                {
+                    "name": "cmd",
+                    "commands": []
+                }
+            ]
+        ]
+    }
+}

package/.vscode.example/settings.json

@@ -0,0 +1,6 @@
+{
+    "php.validate.executablePath": "D:/greenSoftware/phpEnv/php/php-7.4/php.exe",
+    "terminal.integrated.env.windows": {
+        "PATH": "D:/greenSoftware/phpEnv/php/php-7.4/;${env:PATH}"
+    },
+}

package/README.md

@@ -1,71 +1,126 @@
-# CSS Compile Tool
+# CSS 编译工具
 
-A powerful CSS compilation tool that supports SCSS, PostCSS, and TailwindCSS with file watching capabilities.
+支持 SCSS、PostCSS、TailwindCSS 的 CSS 编译工具，自带文件监听功能。
 
-## Installation
+## 安装
 
 ```bash
 npm install -g compile-css
-# or
+# 或
 npm install --save-dev compile-css
 ```
 
-## Usage
+## 使用方法
 
-### Command Line
+直接在项目根目录运行：
 
 ```bash
-# Compile once
 compile-css
-
-# Watch for changes
-compile-css --watch
-
-# Use custom config
-compile-css --config ./my-config.js
 ```
 
-### Programmatic Usage
+工具会自动读取根目录下的 `compileCssConfig.js` 配置文件，启动文件监听并开始编译。
 
-```javascript
-const compileCss = require('compile-css');
+## 配置说明
 
-// Use default config
-compileCss();
+在项目根目录创建 `compileCssConfig.js` 文件。
 
-// With custom options
-compileCss({
-  watch: true,
-  config: './custom-config.js'
-});
-```
+### 配置格式
 
-## Configuration
+支持两种配置格式，**推荐使用 `presets` 多套配置**。
 
-Create a `compileCssConfig.js` file:
+### 单套配置（`paths`）
+
+适合只有一个 HTML 模板的简单项目：
 
 ```javascript
 const path = require('path');
 
 module.exports = {
     paths: {
-        scss: path.resolve('./scss'),
-        template: path.resolve('./html'),
-        temp: path.resolve('./temp'),
-        dist: path.resolve('./html', 'css')
+        scss: path.resolve('./scss'),       // SCSS 源文件目录
+        template: path.resolve('./html'),    // HTML 模板目录
+        temp: path.resolve('./temp'),        // 编译临时目录
+        dist: path.resolve('./html', 'css'), // 编译输出目录
+        scssIgnore: ['scss/common.scss'],    // 忽略的 SCSS 文件
+        templateIgnore: []                   // 忽略的 HTML 文件
     }
 };
 ```
 
-## Features
+### 多套配置（`presets`，推荐）
+
+适合 PC 端 + 手机端等多套模板的项目，每套配置独立编译互不干扰：
+
+```javascript
+const path = require('path');
+
+module.exports = {
+    presets: [
+        {
+            name: 'pc',                             // 标识名称，用于日志输出
+            scss: path.resolve('./scss/pc'),         // PC 端 SCSS 目录
+            template: path.resolve('./html/pc'),     // PC 端 HTML 目录
+            temp: path.resolve('./temp/pc'),         // PC 端临时目录
+            dist: path.resolve('./html/pc', 'css'),  // PC 端输出目录
+            scssIgnore: [],
+            templateIgnore: []
+        },
+        {
+            name: 'mobile',                          // 手机端
+            scss: path.resolve('./scss/mobile'),
+            template: path.resolve('./html/mobile'),
+            temp: path.resolve('./temp/mobile'),
+            dist: path.resolve('./html/mobile', 'css'),
+            scssIgnore: [],
+            templateIgnore: []
+        }
+    ]
+};
+```
+
+### 配置项说明
+
+| 配置项 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| `name` | `string` | 否 | 标识名称，仅 `presets` 模式下使用，用于控制台日志输出，方便区分不同套的编译信息 |
+| `scss` | `string` | 是 | SCSS 源文件目录路径。工具会递归扫描该目录下所有非 `_` 开头的 `.scss` 文件作为入口文件进行编译 |
+| `template` | `string` | 是 | HTML 模板目录路径。当该目录下的 HTML 文件发生变化时，会触发 `common.css` 重新编译，以更新 TailwindCSS 的工具类 |
+| `temp` | `string` | 是 | 编译过程中的临时目录路径。SCSS 先编译为普通 CSS 存放到此目录，再交给 PostCSS 处理。**每次启动时会自动清空此目录** |
+| `dist` | `string` | 是 | 最终编译产物的输出目录路径。经过 tailwindcss、autoprefixer、cssnano 处理后的 CSS 文件会输出到这里 |
+| `scssIgnore` | `string[]` | 否 | SCSS 忽略列表。支持文件名、相对路径或正则表达式。被忽略的文件不会被当作入口文件编译。例如 `['scss/common.scss']` 或 `[/^scss\/lib\//]` |
+| `templateIgnore` | `string[]` | 否 | HTML 忽略列表。支持文件名、相对路径或正则表达式。被忽略的 HTML 文件变化不会触发重新编译 |
+
+### 忽略规则说明
+
+`scssIgnore` 和 `templateIgnore` 支持三种匹配方式：
+
+- **完整相对路径**：`'scss/common.scss'` — 匹配项目根目录下 `scss/common.scss`
+- **目录前缀**：`'scss/lib'` — 匹配 `scss/lib` 目录下的所有文件
+- **文件名**：`'_variables.scss'` — 匹配所有名为 `_variables.scss` 的文件
+- **正则表达式**：`/^scss\/lib\//` — 使用正则匹配相对路径
+
+### 注意事项
+
+- `scss` 目录中以 `_` 开头的文件（如 `_variables.scss`）被视为模块文件，不会作为入口文件编译。但当模块文件发生变化时，会触发所有入口文件重新编译
+- 每个 `preset` 的 `temp` 目录必须是唯一的，不能与其他 `preset` 共享目录
+- 每个 `preset` 的 `temp` 目录在工具启动时会被自动清空重建，确保没有残留文件影响编译结果
+- `tailwind.config.js` 必须放在项目根目录，工具启动时会自动加载
+```
+
+## 编译流程
+
+```
+SCSS 文件  ──sass编译──▶  temp 目录（临时 CSS）  ──tailwindcss + autoprefixer + cssnano──▶  dist 目录（最终 CSS）
+```
 
-- ✅ SCSS compilation
-- ✅ PostCSS processing
-- ✅ TailwindCSS integration
-- ✅ File watching
-- ✅ Auto-prefixing
-- ✅ CSS optimization
+1. 监听 SCSS 文件变化，通过 `sass` 编译到 `temp` 目录
+2. 监听 `temp` 目录的 CSS 文件变化，通过 PostCSS（tailwindcss + autoprefixer + cssnano）编译到 `dist` 目录
+3. 监听 HTML 文件变化，重新编译 `common.css` 以更新 TailwindCSS 的工具类
 
-## License
+## 功能特性
 
-MIT
+- SCSS 编译
+- PostCSS 处理（tailwindcss、autoprefixer、cssnano）
+- 文件变化自动监听编译
+- 支持多套模板配置（PC、手机等）
+- 启动时自动清理临时目录

package/compileCss.js

@@ -22,7 +22,7 @@ function loadUserConfig(configName) {
 }
 
 // 加载编译配置（优先用户项目，回退到包默认）
-const config = loadUserConfig('compileCssConfig.js') || {
+const rawConfig = loadUserConfig('compileCssConfig.js') || {
     paths: {
         scss: path.resolve('./scss'),
         template: path.resolve('./html'),
@@ -31,10 +31,24 @@ const config = loadUserConfig('compileCssConfig.js') || {
     }
 };
 
-const scss = config.paths.scss;
-const template = config.paths.template;
-const temp = config.paths.temp;
-const dist = config.paths.dist;
+// 兼容旧版单套 paths 配置，自动转换为 presets
+let presets;
+if (rawConfig.presets) {
+    presets = rawConfig.presets;
+} else if (rawConfig.paths) {
+    presets = [{
+        name: 'default',
+        scss: rawConfig.paths.scss,
+        template: rawConfig.paths.template,
+        temp: rawConfig.paths.temp,
+        dist: rawConfig.paths.dist,
+        scssIgnore: rawConfig.paths.scssIgnore || [],
+        templateIgnore: rawConfig.paths.templateIgnore || []
+    }];
+} else {
+    console.error('错误：配置文件格式不正确，请提供 paths 或 presets 配置。');
+    process.exit(1);
+}
 
 // 加载Tailwind配置（必须由用户提供）
 const toption = loadUserConfig('tailwind.config.js');
@@ -43,14 +57,33 @@ if (!toption) {
     process.exit(1);
 }
 
+/**
+ * 检查文件是否被忽略
+ * @param {string} filePath 文件路径
+ * @param {[string]} ignoreList 忽略列表，每个元素可以是字符串或正则表达式
+ * @return {boolean} 是否被忽略
+ */
+function isIgnored(filePath, ignoreList) {
+    const relative = path.relative(process.cwd(), filePath);
+    return ignoreList.some(ignored => {
+        if (typeof ignored === 'string') {
+            return relative === ignored || relative.startsWith(ignored + path.sep) || path.basename(filePath) === ignored;
+        }
+        if (ignored instanceof RegExp) {
+            return ignored.test(relative);
+        }
+        return false;
+    });
+}
+
 /**
  * 获取入口文件列表
  * @param {string|[string]} entrance 入口 文件路径或文件路径数组，可以是文件也可以是目录，目录要递归查找
+ * @param {[string]} ignoreList 忽略列表
  * @return {[string]} 返回入口文件列表 
  */
-function getEntranceFiles(entrance) {
+function getEntranceFiles(entrance, ignoreList) {
     const result = new Set();
-
     const entrances = Array.isArray(entrance) ? entrance : [entrance];
 
     function walk(p) {
@@ -61,15 +94,14 @@ function getEntranceFiles(entrance) {
         if (stat.isFile()) {
             const ext = path.extname(p);
             const name = path.basename(p);
-
-            // 只收集非 "_" 开头的 scss 文件
-            if (ext === '.scss' && !name.startsWith('_')) {
+            if (ext === '.scss' && !name.startsWith('_') && !isIgnored(p, ignoreList)) {
                 result.add(path.resolve(p));
             }
             return;
         }
 
         if (stat.isDirectory()) {
+            if (isIgnored(p, ignoreList)) return;
             const files = fs.readdirSync(p);
             for (const file of files) {
                 walk(path.join(p, file));
@@ -139,67 +171,74 @@ function postcssCompile(file, output, tcontent) {
 
 }
 
-let paths = [
-    path.resolve(template),
-    path.resolve(scss),
-    path.resolve(temp),
-];
-var watcher = chokidar.watch(paths, {
-    ignored: [
-        // watchRootPath+'/ThinkPHP',
-    ],
-    persistent: true,
-    // followSymlinks:false
-})
-    .on('all', (eventName, pathfile, stats) => {
-        try {
-            console.log(eventName, pathfile)
-            if (['add', 'change'].includes(eventName)) {  //新增或者修改文件 进行编译操作
-                if (pathfile.endsWith('.scss')) {
-                    // 获取文件名
-                    let fileName = path.basename(pathfile);
-                    let entranceFiles = [];
-                    if(fileName.startsWith('_')){ //如果是模块，编译所有入口文件
-                        entranceFiles = getEntranceFiles(scss);
-                    }else{ //如果是普通文件，编译该文件
-                        entranceFiles = [pathfile];
+// 为每个 preset 启动独立的 watcher
+presets.forEach(function (preset) {
+    var scssDir = preset.scss;
+    var templateDir = preset.template;
+    var tempDir = preset.temp;
+    var distDir = preset.dist;
+    var scssIgnore = preset.scssIgnore || [];
+    var templateIgnore = preset.templateIgnore || [];
+    var presetName = preset.name || 'default';
+
+    // 启动时清理并重新创建 temp 目录
+    if (fs.existsSync(tempDir)) {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+    fs.mkdirSync(tempDir, { recursive: true });
+
+    var watchPaths = [
+        path.resolve(templateDir),
+        path.resolve(scssDir),
+        path.resolve(tempDir),
+    ];
+
+    chokidar.watch(watchPaths, {
+        ignored: [
+            ...scssIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
+            ...templateIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
+        ],
+        persistent: true,
+    })
+        .on('all', function (eventName, pathfile, stats) {
+            try {
+                console.log('[' + presetName + ']', eventName, pathfile)
+                if (['add', 'change'].includes(eventName)) {
+                    if (pathfile.endsWith('.scss')) {
+                        var fileName = path.basename(pathfile);
+                        var entranceFiles = [];
+                        if (fileName.startsWith('_')) {
+                            entranceFiles = getEntranceFiles(scssDir, scssIgnore);
+                        } else {
+                            entranceFiles = [pathfile];
+                        }
+
+                        entranceFiles.forEach(function (entranceFile) {
+                            var output = entranceFile.replace(scssDir, tempDir);
+                            output = output.replace(/\.scss$/, '.css');
+                            sassCompile(entranceFile, output);
+                        });
                     }
-                    
-                     // 编译入口文件
-                    entranceFiles.forEach(entranceFile => {
-                        let output = '';
-                        output = entranceFile.replace(scss, temp);
-                        //将文件扩展名改为css
-                        output = output.replace(/\.scss$/, '.css');
-                        sassCompile(entranceFile, output)
-                    });
-
-                }
-
-
-                if (pathfile.endsWith('.css')) {
-                    let output = '';
-                    //输出的目录结构应该保持和scss目录结构 或者 temp目录结构一致
-                    //如果是来源时scssDir目录结构，那么输出的目录结构应该是 distDir 目录结构
-                    let tcontent = [];
-                        tcontent = [path.resolve(template, '**/*.{html,htm}')];
-                   
-                    output = pathfile.replace(temp, dist);
-                    postcssCompile(pathfile, output, tcontent)
-                }
 
+                    if (pathfile.endsWith('.css')) {
+                        //输出的目录结构应该保持和scss目录结构 或者 temp目录结构一致
+                        //如果来源是scssDir目录，那么输出的目录应该是 distDir
+                        var tcontent = [path.resolve(templateDir, '**/*.{html,htm}')];
+                        var output = pathfile.replace(tempDir, distDir);
+                        postcssCompile(pathfile, output, tcontent);
+                    }
 
-                if (pathfile.endsWith('.html')) {
-                    let tcontent;
-                    let input = '';
-                    let output = '';
-                    tcontent = [path.resolve(template, '**/*.{html,htm}')];
-                    input = path.resolve(temp, 'common.css');
-                    output = path.resolve(dist, 'common.css');
-                    postcssCompile(input, output, tcontent);
+                    if (pathfile.endsWith('.html') && !isIgnored(pathfile, templateIgnore)) {
+                        var tcontent = [path.resolve(templateDir, '**/*.{html,htm}')];
+                        var input = path.resolve(tempDir, 'common.css');
+                        var output = path.resolve(distDir, 'common.css');
+                        postcssCompile(input, output, tcontent);
+                    }
                 }
+            } catch (e) {
+                console.log(e);
             }
-        } catch (e) {
-            console.log(e)
-        }
-    })
+        });
+
+    console.log('[' + presetName + '] 监听已启动: scss=' + scssDir + ', template=' + templateDir);
+});

package/compileCssConfig.js

@@ -1,10 +1,36 @@
 const path = require('path');
 
+// module.exports = {
+//     paths: {
+//         scss: path.resolve('./scss'), // scss文件目录
+//         template: path.resolve('./html'), // html文件目录
+//         temp: path.resolve('./temp'), //编译过程中的临时文件目录
+//         dist: path.resolve('./html', 'css'), //编译后的css文件目录
+//         scssIgnore: ['scss/common.scss'], // 忽略的scss文件名（可以是文件名或目录名）
+//         templateIgnore: [] // 忽略的html文件（可以是文件名或目录名）
+//     }
+// };
+
+// 多套配置
 module.exports = {
-    paths: {
-        scss: path.resolve('./scss'),
-        template: path.resolve('./html'),
-        temp: path.resolve('./temp'),
-        dist: path.resolve('./html', 'css')
-    }
-};
+    presets: [
+        {
+            name: 'pc',                          // 标识名称，用于日志
+            scss: path.resolve('./scss/'),
+            template: path.resolve('./html/'),
+            temp: path.resolve('./temp/pc'),
+            dist: path.resolve('html/css'),
+            scssIgnore: [],
+            templateIgnore: []
+        },
+        {
+            name: 'mobile',
+            scss: path.resolve('./scss/mobile'),
+            template: path.resolve('./html/mobile'),
+            temp: path.resolve('./temp/mobile'),
+            dist: path.resolve('html', 'mobile/css'),
+            scssIgnore: [],
+            templateIgnore: []
+        }
+    ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compile-css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A CSS compilation tool that supports SCSS, PostCSS, and TailwindCSS",
   "main": "compileCss.js",
   "bin": {
@@ -48,4 +48,4 @@
   "devDependencies": {
     "requirejs": "^2.3.8"
   }
-}
+}