compile-css 1.0.1 → 2.0.0

package/README.md

@@ -24,32 +24,7 @@ compile-css
 
 在项目根目录创建 `compileCssConfig.js` 文件。
 
-### 配置格式
-
-支持两种配置格式，**推荐使用 `presets` 多套配置**。
-
-### 单套配置（`paths`）
-
-适合只有一个 HTML 模板的简单项目：
-
-```javascript
-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'), // 编译输出目录
-        scssIgnore: ['scss/common.scss'],    // 忽略的 SCSS 文件
-        templateIgnore: []                   // 忽略的 HTML 文件
-    }
-};
-```
-
-### 多套配置（`presets`，推荐）
-
-适合 PC 端 + 手机端等多套模板的项目，每套配置独立编译互不干扰：
+### 配置示例
 
 ```javascript
 const path = require('path');
@@ -57,22 +32,22 @@ 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: 'pc',                          // 标识名称，用于日志输出
+            scss: path.resolve('./scss/pc'),      // SCSS 源文件目录
+            content: path.resolve('./html/pc'),   // TailwindCSS 扫描目录
+            temp: path.resolve('./temp/pc'),      // 编译临时目录
+            dist: path.resolve('./html/pc', 'css'), // 编译输出目录
+            scssIgnore: [],                       // 忽略的 SCSS 文件
+            watchIgnore: []                       // 忽略的监听文件
         },
         {
-            name: 'mobile',                          // 手机端
+            name: 'mobile',
             scss: path.resolve('./scss/mobile'),
-            template: path.resolve('./html/mobile'),
+            content: path.resolve('./html/mobile'),
             temp: path.resolve('./temp/mobile'),
             dist: path.resolve('./html/mobile', 'css'),
             scssIgnore: [],
-            templateIgnore: []
+            watchIgnore: []
         }
     ]
 };
@@ -82,17 +57,17 @@ module.exports = {
 
 | 配置项 | 类型 | 必填 | 说明 |
 |--------|------|------|------|
-| `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 文件变化不会触发重新编译 |
+| `name` | `string` | 否 | 标识名称，用于控制台日志输出，方便区分不同 preset 的编译信息 |
+| `scss` | `string` | 是 | SCSS 源文件目录。递归扫描该目录下所有非 `_` 开头的 `.scss` 文件作为入口文件编译 |
+| `content` | `string` | 是 | TailwindCSS 扫描目录。该目录下的文件变化会触发 `common.css` 重新编译。会与 `tailwind.config.js` 中的 `content` 合并 |
+| `temp` | `string` | 是 | 编译临时目录。SCSS 先编译为普通 CSS 存放到此，再交给 PostCSS 处理。**每次启动时自动清空** |
+| `dist` | `string` | 是 | 最终输出目录。经过 tailwindcss、autoprefixer、cssnano 处理后的 CSS 文件输出到这里 |
+| `scssIgnore` | `string[]` | 否 | SCSS 忽略列表。支持文件名、相对路径或正则表达式。被忽略的文件不会作为入口文件编译 |
+| `watchIgnore` | `string[]` | 否 | 监听忽略列表。`content` 目录中匹配的文件变化不会触发重新编译 |
 
-### 忽略规则说明
+### 忽略规则
 
-`scssIgnore` 和 `templateIgnore` 支持三种匹配方式：
+`scssIgnore` 和 `watchIgnore` 支持四种匹配方式：
 
 - **完整相对路径**：`'scss/common.scss'` — 匹配项目根目录下 `scss/common.scss`
 - **目录前缀**：`'scss/lib'` — 匹配 `scss/lib` 目录下的所有文件
@@ -102,10 +77,10 @@ module.exports = {
 ### 注意事项
 
 - `scss` 目录中以 `_` 开头的文件（如 `_variables.scss`）被视为模块文件，不会作为入口文件编译。但当模块文件发生变化时，会触发所有入口文件重新编译
-- 每个 `preset` 的 `temp` 目录必须是唯一的，不能与其他 `preset` 共享目录
-- 每个 `preset` 的 `temp` 目录在工具启动时会被自动清空重建，确保没有残留文件影响编译结果
-- `tailwind.config.js` 必须放在项目根目录，工具启动时会自动加载
-```
+- 每个 preset 的 `temp` 目录必须唯一，不能与其他 preset 共享
+- 每个 preset 的 `temp` 目录启动时自动清空重建
+- `tailwind.config.js` 必须放在项目根目录
+- `content` 字段与 `tailwind.config.js` 中的 `content` 会合并，无需重复配置
 
 ## 编译流程
 
@@ -113,14 +88,13 @@ module.exports = {
 SCSS 文件  ──sass编译──▶  temp 目录（临时 CSS）  ──tailwindcss + autoprefixer + cssnano──▶  dist 目录（最终 CSS）
 ```
 
-1. 监听 SCSS 文件变化，通过 `sass` 编译到 `temp` 目录
-2. 监听 `temp` 目录的 CSS 文件变化，通过 PostCSS（tailwindcss + autoprefixer + cssnano）编译到 `dist` 目录
-3. 监听 HTML 文件变化，重新编译 `common.css` 以更新 TailwindCSS 的工具类
+1. SCSS 文件变化 → `sass` 编译到 `temp` 目录
+2. `temp` 目录 CSS 文件变化 → PostCSS（tailwindcss + autoprefixer + cssnano）编译到 `dist` 目录
+3. `content` 目录文件变化 → 重新编译 `common.css`，更新 TailwindCSS 工具类
 
 ## 功能特性
-
 - SCSS 编译
 - PostCSS 处理（tailwindcss、autoprefixer、cssnano）
 - 文件变化自动监听编译
-- 支持多套模板配置（PC、手机等）
+- 支持多套配置（PC、手机等多端项目）
 - 启动时自动清理临时目录

package/compileCss.js

@@ -21,34 +21,13 @@ function loadUserConfig(configName) {
     return null;
 }
 
-// 加载编译配置（优先用户项目，回退到包默认）
-const rawConfig = loadUserConfig('compileCssConfig.js') || {
-    paths: {
-        scss: path.resolve('./scss'),
-        template: path.resolve('./html'),
-        temp: path.resolve('./temp'),
-        dist: path.resolve('./html', 'css')
-    }
-};
-
-// 兼容旧版单套 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 配置。');
+// 加载编译配置
+const config = loadUserConfig('compileCssConfig.js');
+if (!config || !config.presets) {
+    console.error('错误：未找到 compileCssConfig.js 或配置缺少 presets 字段。');
     process.exit(1);
 }
+var presets = config.presets;
 
 // 加载Tailwind配置（必须由用户提供）
 const toption = loadUserConfig('tailwind.config.js');
@@ -137,7 +116,10 @@ function postcssCompile(file, output, tcontent) {
 
     let option = { ...toption };
     if (tcontent) {
-        option.content = tcontent;
+        option.content = [
+            ...(Array.isArray(option.content) ? option.content : []),
+            ...tcontent
+        ];
     }
     let css = `@tailwind base;
 @tailwind components;
@@ -174,13 +156,19 @@ function postcssCompile(file, output, tcontent) {
 // 为每个 preset 启动独立的 watcher
 presets.forEach(function (preset) {
     var scssDir = preset.scss;
-    var templateDir = preset.template;
+    var contentDir = preset.content;
     var tempDir = preset.temp;
     var distDir = preset.dist;
     var scssIgnore = preset.scssIgnore || [];
-    var templateIgnore = preset.templateIgnore || [];
+    var watchIgnore = preset.watchIgnore || [];
     var presetName = preset.name || 'default';
 
+    // 构建 TailwindCSS content 路径
+    var tailwindContent = [];
+    if (contentDir) {
+        tailwindContent.push(path.resolve(contentDir, '**/*'));
+    }
+
     // 启动时清理并重新创建 temp 目录
     if (fs.existsSync(tempDir)) {
         fs.rmSync(tempDir, { recursive: true, force: true });
@@ -188,15 +176,17 @@ presets.forEach(function (preset) {
     fs.mkdirSync(tempDir, { recursive: true });
 
     var watchPaths = [
-        path.resolve(templateDir),
         path.resolve(scssDir),
         path.resolve(tempDir),
     ];
+    if (contentDir) {
+        watchPaths.push(path.resolve(contentDir));
+    }
 
     chokidar.watch(watchPaths, {
         ignored: [
             ...scssIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
-            ...templateIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
+            ...watchIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
         ],
         persistent: true,
     })
@@ -221,18 +211,14 @@ presets.forEach(function (preset) {
                     }
 
                     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);
+                        postcssCompile(pathfile, output, tailwindContent);
                     }
 
-                    if (pathfile.endsWith('.html') && !isIgnored(pathfile, templateIgnore)) {
-                        var tcontent = [path.resolve(templateDir, '**/*.{html,htm}')];
+                    if (contentDir && !isIgnored(pathfile, watchIgnore)) {
                         var input = path.resolve(tempDir, 'common.css');
                         var output = path.resolve(distDir, 'common.css');
-                        postcssCompile(input, output, tcontent);
+                        postcssCompile(input, output, tailwindContent);
                     }
                 }
             } catch (e) {
@@ -240,5 +226,5 @@ presets.forEach(function (preset) {
             }
         });
 
-    console.log('[' + presetName + '] 监听已启动: scss=' + scssDir + ', template=' + templateDir);
+    console.log('[' + presetName + '] 监听已启动: scss=' + scssDir + ', content=' + (contentDir || '未设置'));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compile-css",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A CSS compilation tool that supports SCSS, PostCSS, and TailwindCSS",
   "main": "compileCss.js",
   "bin": {
@@ -25,7 +25,10 @@
     "url": "https://gitee.com/coder_home/compile-css/issues"
   },
   "scripts": {
-    "compileCss": "node compileCss.js"
+    "compileCss": "node compileCss.js",
+    "publish-major": "npm version major && git push --follow-tags && npm publish --registry=https://registry.npmjs.org/",
+    "publish-minor": "npm version minor && git push --follow-tags && npm publish --registry=https://registry.npmjs.org/",
+    "publish-patch": "npm version patch && git push --follow-tags && npm publish --registry=https://registry.npmjs.org/"
   },
   "dependencies": {
     "chokidar": "^4.0.3",

package/.vscode.example/launch.json

@@ -1,14 +0,0 @@
-{
-    // 使用 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

@@ -1,30 +0,0 @@
-{
-    "$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

@@ -1,6 +0,0 @@
-{
-    "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/compileCssConfig.js

@@ -1,36 +0,0 @@
-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 = {
-    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: []
-        }
-    ]
-};