grunt-contrib-compass选项完整清单40配置项一次看懂sassDir与cssDir别再配错【免费下载链接】grunt-contrib-compassCompile Compass to CSS.项目地址: https://gitcode.com/gh_mirrors/gr/grunt-contrib-compassgrunt-contrib-compass是 Grunt 官方出品的 Compass 编译任务插件作用是把 Compass/Sass 源码一键编译成 CSS。本文基于项目自带的完整选项文档把全部 47 个配置项按用途分成 5 大类做成速查清单重点讲清sassDir和cssDir这对最容易配错的核心参数帮你少走弯路 ⚡一、先搞懂为什么只有 sassDir 和 cssDir 这对主角Compass 是按文件夹工作的所以这个任务没有传统 Grunt 任务的src/dest写法而是直接定义两个目录详见任务概述选项类型一句话作用sassDirString源目录存放 Sass 样式表的文件夹cssDirString目标目录编译产出的 CSS 文件夹新手最常犯的两个错误把sassDir写成css、cssDir写成sass—— 方向反了编译结果当然全错以为要配src/dest—— 这个任务里根本不存在这两个字段。项目根目录的 Gruntfile.js 就是标准写法sassDir: test/fixtures指向源码cssDir: tmp指向输出。最小可用配置长这样compass: { dist: { options: { sassDir: sass, // 源码在这 cssDir: css, // 产物去这 environment: production } } }二、核心目录与编译范围7 个基础配置项选项类型作用默认值sassDirStringSass 源码目录—必填cssDirStringCSS 输出目录—必填specifyString|Array只编译指定文件支持通配符忽略下划线_开头的文件—basePathStringCompass 的运行根路径与 Gruntfile 同目录imagesDirString图片目录—javascriptsDirStringJavaScript 目录—fontsDirString字体目录—specify的小细节源码 tasks/lib/compass.js 里做了过滤下划线开头的部分文件如_imported.scss不会被编译这符合 Sass 的 partial 约定。三、环境与输出8 个控制长什么样的选项选项类型作用默认值environmentStringdevelopment或production决定压缩等默认行为developmentoutputStyleStringCSS 输出模式nested/expanded/compact/compressed—sourcemapBoolean生成 Source MapsfalsebannerString在产物文件头部加一段字符串如版权信息—noLineCommentsBoolean关闭行注释—debugInfoBoolean在 CSS 里输出选择器来源行号方便调试compressed模式自动禁用—relativeAssetsBoolean让 Compass 的 asset 辅助函数生成相对 URL—forceBoolean允许覆盖已存在的文件—⚠️两个高频踩坑点banner必须搭配specify使用否则任务会直接告警退出见 tasks/lib/compass.jsbanner与sourcemap同时使用时可能冲突生产环境二选一更稳妥。四、HTTP 路径系列14 个Path选项速查表这一组最容易看晕其实规律统一*Dir是磁盘目录*Path是相对路径http*Path是浏览器访问路径。按资产类型分组记忆即可资产类型磁盘目录相对路径HTTP 路径样式表—cssPath默认stylesheetshttpStylesheetsPathSass 源—sassPath默认sass—图片imagesDirimagesPath默认imageshttpImagesPath生成图片generatedImagesDirgeneratedImagesPathhttpGeneratedImagesPathJavaScriptjavascriptsDirjavascriptsPathhttpJavascriptsPath字体fontsDirfontsPathhttpFontsPath/httpFontsDir所有 HTTP 路径都基于httpPath默认/拼接比如httpStylesheetsPath默认等于httpPath / cssDir。如果你的网站部署在子目录如/blog/只需改httpPath一项其余自动跟随。五、配置机制与运行模式最后 18 个选项1️⃣ config 与 raw二选一不能混用选项作用config指定外部config.rb配置文件路径默认为 Gruntfile 所在目录raw直接以内联字符串形式写 Compass 配置无需建文件项目里两种玩法都有现成示范test/config.rb 演示外部配置文件只有两行sass_dir和css_dirdocs/compass-examples.md 演示了用raw写preferred_syntax :sass。优先级规则Gruntfile 里的选项 config.rb raw。例如同时写了config: config/config.rb和cssDir: dist/css最终cssDir以 Gruntfile 为准。另外有 16 个选项如cssPath、httpImagesPath等无法走命令行参数任务会自动把它们转写进一个临时config.rb逻辑在 tasks/lib/compass.js所以一旦与config同时出现就会告警。2️⃣ 加载与依赖4 个引入选项选项作用require运行前加载指定 Ruby 库无需项目配置文件即可使用 Compass 插件load加载指定目录中的框架或扩展loadAll加载指定目录中的全部框架/扩展importPath让指定文件夹下的文件可被 Sass 的import找到3️⃣ 扩展、缓存与行为开关5 个杂项选项作用默认值extensionsPath/extensionsDir项目内扩展目录如通过 Bower 安装仅 Compass ≥0.12.2project_root/extensionsspriteLoadPath追加雪碧图查找位置可传数组同imagesPathassetCacheBuster设为false可关闭资源缓存破坏器truecacheDirSass 缓存目录.sass-cacheapp声明集成环境stand_alone或railsstand_alone4️⃣ 运行模式watch、clean 与调试选项作用watch改用compass watch监听 Sass 变化自动重编译。注意它是阻塞任务想和 Grunt 的watch任务同时跑需借助grunt-concurrent并行clean改用compass clean删除生成文件和 Sass 缓存quiet安静模式减少输出trace出错时打印完整堆栈boring关闭彩色输出--no-color运行时会自动加上bundleExec以bundle exec compass compile方式运行适合用 Bundler 管理依赖的项目六、新手配置避坑清单 只填两个目录就能跑sassDircssDir是最小配置方向别反config和raw二选一同时写会直接报错banner必须配specify且注意与 sourcemap 的冲突watch: true会阻塞 Grunt需要并行时搭配grunt-concurrent部署在子目录只需改httpPath其余 HTTP 路径自动跟随要求系统已安装 Ruby、Sass 与 Compass≥1.0.1且 Compass 版本需 ≥0.12.2任务启动前会做版本检查。完整版 47 项参数说明可对照官方选项文档与 README配合 test/compass_test.js 中的各场景断言就能覆盖绝大多数项目需求了。【免费下载链接】grunt-contrib-compassCompile Compass to CSS.项目地址: https://gitcode.com/gh_mirrors/gr/grunt-contrib-compass创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 grunt-contrib-compass选项完整清单：40+配置项一次看懂，sassDir与cssDir别再配错
grunt-contrib-compass选项完整清单40配置项一次看懂sassDir与cssDir别再配错【免费下载链接】grunt-contrib-compassCompile Compass to CSS.项目地址: https://gitcode.com/gh_mirrors/gr/grunt-contrib-compassgrunt-contrib-compass是 Grunt 官方出品的 Compass 编译任务插件作用是把 Compass/Sass 源码一键编译成 CSS。本文基于项目自带的完整选项文档把全部 47 个配置项按用途分成 5 大类做成速查清单重点讲清sassDir和cssDir这对最容易配错的核心参数帮你少走弯路 ⚡一、先搞懂为什么只有 sassDir 和 cssDir 这对主角Compass 是按文件夹工作的所以这个任务没有传统 Grunt 任务的src/dest写法而是直接定义两个目录详见任务概述选项类型一句话作用sassDirString源目录存放 Sass 样式表的文件夹cssDirString目标目录编译产出的 CSS 文件夹新手最常犯的两个错误把sassDir写成css、cssDir写成sass—— 方向反了编译结果当然全错以为要配src/dest—— 这个任务里根本不存在这两个字段。项目根目录的 Gruntfile.js 就是标准写法sassDir: test/fixtures指向源码cssDir: tmp指向输出。最小可用配置长这样compass: { dist: { options: { sassDir: sass, // 源码在这 cssDir: css, // 产物去这 environment: production } } }二、核心目录与编译范围7 个基础配置项选项类型作用默认值sassDirStringSass 源码目录—必填cssDirStringCSS 输出目录—必填specifyString|Array只编译指定文件支持通配符忽略下划线_开头的文件—basePathStringCompass 的运行根路径与 Gruntfile 同目录imagesDirString图片目录—javascriptsDirStringJavaScript 目录—fontsDirString字体目录—specify的小细节源码 tasks/lib/compass.js 里做了过滤下划线开头的部分文件如_imported.scss不会被编译这符合 Sass 的 partial 约定。三、环境与输出8 个控制长什么样的选项选项类型作用默认值environmentStringdevelopment或production决定压缩等默认行为developmentoutputStyleStringCSS 输出模式nested/expanded/compact/compressed—sourcemapBoolean生成 Source MapsfalsebannerString在产物文件头部加一段字符串如版权信息—noLineCommentsBoolean关闭行注释—debugInfoBoolean在 CSS 里输出选择器来源行号方便调试compressed模式自动禁用—relativeAssetsBoolean让 Compass 的 asset 辅助函数生成相对 URL—forceBoolean允许覆盖已存在的文件—⚠️两个高频踩坑点banner必须搭配specify使用否则任务会直接告警退出见 tasks/lib/compass.jsbanner与sourcemap同时使用时可能冲突生产环境二选一更稳妥。四、HTTP 路径系列14 个Path选项速查表这一组最容易看晕其实规律统一*Dir是磁盘目录*Path是相对路径http*Path是浏览器访问路径。按资产类型分组记忆即可资产类型磁盘目录相对路径HTTP 路径样式表—cssPath默认stylesheetshttpStylesheetsPathSass 源—sassPath默认sass—图片imagesDirimagesPath默认imageshttpImagesPath生成图片generatedImagesDirgeneratedImagesPathhttpGeneratedImagesPathJavaScriptjavascriptsDirjavascriptsPathhttpJavascriptsPath字体fontsDirfontsPathhttpFontsPath/httpFontsDir所有 HTTP 路径都基于httpPath默认/拼接比如httpStylesheetsPath默认等于httpPath / cssDir。如果你的网站部署在子目录如/blog/只需改httpPath一项其余自动跟随。五、配置机制与运行模式最后 18 个选项1️⃣ config 与 raw二选一不能混用选项作用config指定外部config.rb配置文件路径默认为 Gruntfile 所在目录raw直接以内联字符串形式写 Compass 配置无需建文件项目里两种玩法都有现成示范test/config.rb 演示外部配置文件只有两行sass_dir和css_dirdocs/compass-examples.md 演示了用raw写preferred_syntax :sass。优先级规则Gruntfile 里的选项 config.rb raw。例如同时写了config: config/config.rb和cssDir: dist/css最终cssDir以 Gruntfile 为准。另外有 16 个选项如cssPath、httpImagesPath等无法走命令行参数任务会自动把它们转写进一个临时config.rb逻辑在 tasks/lib/compass.js所以一旦与config同时出现就会告警。2️⃣ 加载与依赖4 个引入选项选项作用require运行前加载指定 Ruby 库无需项目配置文件即可使用 Compass 插件load加载指定目录中的框架或扩展loadAll加载指定目录中的全部框架/扩展importPath让指定文件夹下的文件可被 Sass 的import找到3️⃣ 扩展、缓存与行为开关5 个杂项选项作用默认值extensionsPath/extensionsDir项目内扩展目录如通过 Bower 安装仅 Compass ≥0.12.2project_root/extensionsspriteLoadPath追加雪碧图查找位置可传数组同imagesPathassetCacheBuster设为false可关闭资源缓存破坏器truecacheDirSass 缓存目录.sass-cacheapp声明集成环境stand_alone或railsstand_alone4️⃣ 运行模式watch、clean 与调试选项作用watch改用compass watch监听 Sass 变化自动重编译。注意它是阻塞任务想和 Grunt 的watch任务同时跑需借助grunt-concurrent并行clean改用compass clean删除生成文件和 Sass 缓存quiet安静模式减少输出trace出错时打印完整堆栈boring关闭彩色输出--no-color运行时会自动加上bundleExec以bundle exec compass compile方式运行适合用 Bundler 管理依赖的项目六、新手配置避坑清单 只填两个目录就能跑sassDircssDir是最小配置方向别反config和raw二选一同时写会直接报错banner必须配specify且注意与 sourcemap 的冲突watch: true会阻塞 Grunt需要并行时搭配grunt-concurrent部署在子目录只需改httpPath其余 HTTP 路径自动跟随要求系统已安装 Ruby、Sass 与 Compass≥1.0.1且 Compass 版本需 ≥0.12.2任务启动前会做版本检查。完整版 47 项参数说明可对照官方选项文档与 README配合 test/compass_test.js 中的各场景断言就能覆盖绝大多数项目需求了。【免费下载链接】grunt-contrib-compassCompile Compass to CSS.项目地址: https://gitcode.com/gh_mirrors/gr/grunt-contrib-compass创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考