compile-css 1.0.0 → 2.0.0

package/README.md

@@ -1,71 +1,100 @@
-# 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
-
-```javascript
-const compileCss = require('compile-css');
-
-// Use default config
-compileCss();
+工具会自动读取根目录下的 `compileCssConfig.js` 配置文件，启动文件监听并开始编译。
 
-// With custom options
-compileCss({
-  watch: true,
-  config: './custom-config.js'
-});
-```
+## 配置说明
 
-## Configuration
+在项目根目录创建 `compileCssConfig.js` 文件。
 
-Create a `compileCssConfig.js` file:
+### 配置示例
 
 ```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')
-    }
+    presets: [
+        {
+            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',
+            scss: path.resolve('./scss/mobile'),
+            content: path.resolve('./html/mobile'),
+            temp: path.resolve('./temp/mobile'),
+            dist: path.resolve('./html/mobile', 'css'),
+            scssIgnore: [],
+            watchIgnore: []
+        }
+    ]
 };
 ```
 
-## Features
+### 配置项说明
+
+| 配置项 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| `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` 目录中匹配的文件变化不会触发重新编译 |
+
+### 忽略规则
 
-- ✅ SCSS compilation
-- ✅ PostCSS processing
-- ✅ TailwindCSS integration
-- ✅ File watching
-- ✅ Auto-prefixing
-- ✅ CSS optimization
+`scssIgnore` 和 `watchIgnore` 支持四种匹配方式：
+
+- **完整相对路径**：`'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` 必须放在项目根目录
+- `content` 字段与 `tailwind.config.js` 中的 `content` 会合并，无需重复配置
+
+## 编译流程
+
+```
+SCSS 文件  ──sass编译──▶  temp 目录（临时 CSS）  ──tailwindcss + autoprefixer + cssnano──▶  dist 目录（最终 CSS）
+```
 
-## License
+1. SCSS 文件变化 → `sass` 编译到 `temp` 目录
+2. `temp` 目录 CSS 文件变化 → PostCSS（tailwindcss + autoprefixer + cssnano）编译到 `dist` 目录
+3. `content` 目录文件变化 → 重新编译 `common.css`，更新 TailwindCSS 工具类
 
-MIT
+## 功能特性
+- SCSS 编译
+- PostCSS 处理（tailwindcss、autoprefixer、cssnano）
+- 文件变化自动监听编译
+- 支持多套配置（PC、手机等多端项目）
+- 启动时自动清理临时目录

package/compileCss.js

@@ -21,20 +21,13 @@ function loadUserConfig(configName) {
     return null;
 }
 
-// 加载编译配置（优先用户项目，回退到包默认）
-const config = loadUserConfig('compileCssConfig.js') || {
-    paths: {
-        scss: path.resolve('./scss'),
-        template: path.resolve('./html'),
-        temp: path.resolve('./temp'),
-        dist: path.resolve('./html', 'css')
-    }
-};
-
-const scss = config.paths.scss;
-const template = config.paths.template;
-const temp = config.paths.temp;
-const dist = config.paths.dist;
+// 加载编译配置
+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');
@@ -43,14 +36,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 +73,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));
@@ -105,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;
@@ -139,67 +153,78 @@ 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];
-                    }
-                    
-                     // 编译入口文件
-                    entranceFiles.forEach(entranceFile => {
-                        let output = '';
-                        output = entranceFile.replace(scss, temp);
-                        //将文件扩展名改为css
-                        output = output.replace(/\.scss$/, '.css');
-                        sassCompile(entranceFile, output)
-                    });
-
-                }
+// 为每个 preset 启动独立的 watcher
+presets.forEach(function (preset) {
+    var scssDir = preset.scss;
+    var contentDir = preset.content;
+    var tempDir = preset.temp;
+    var distDir = preset.dist;
+    var scssIgnore = preset.scssIgnore || [];
+    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 });
+    }
+    fs.mkdirSync(tempDir, { recursive: true });
+
+    var watchPaths = [
+        path.resolve(scssDir),
+        path.resolve(tempDir),
+    ];
+    if (contentDir) {
+        watchPaths.push(path.resolve(contentDir));
+    }
 
-                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)
-                }
+    chokidar.watch(watchPaths, {
+        ignored: [
+            ...scssIgnore.map(function (i) { return path.resolve(process.cwd(), i); }),
+            ...watchIgnore.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);
+                        });
+                    }
 
+                    if (pathfile.endsWith('.css')) {
+                        var output = pathfile.replace(tempDir, distDir);
+                        postcssCompile(pathfile, output, tailwindContent);
+                    }
 
-                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 (contentDir && !isIgnored(pathfile, watchIgnore)) {
+                        var input = path.resolve(tempDir, 'common.css');
+                        var output = path.resolve(distDir, 'common.css');
+                        postcssCompile(input, output, tailwindContent);
+                    }
                 }
+            } catch (e) {
+                console.log(e);
             }
-        } catch (e) {
-            console.log(e)
-        }
-    })
+        });
+
+    console.log('[' + presetName + '] 监听已启动: scss=' + scssDir + ', content=' + (contentDir || '未设置'));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compile-css",
-  "version": "1.0.0",
+  "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",
@@ -48,4 +51,4 @@
   "devDependencies": {
     "requirejs": "^2.3.8"
   }
-}
+}

package/compileCssConfig.js

@@ -1,10 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    paths: {
-        scss: path.resolve('./scss'),
-        template: path.resolve('./html'),
-        temp: path.resolve('./temp'),
-        dist: path.resolve('./html', 'css')
-    }
-};