不同SASS/CoffeeScript的基础上构建
我试图为前端框架,将在SASS(以及可能的CoffeeScript)的基础上我在哪里部署创建不同的路径创建构建系统变量值。例如,我可能在我的本地SASS中引用了一个映像文件../images/image.png
,这在我的本地环境中工作正常。但是,我的客户有一个非常锁定的环境,必须以不同的方式完成(从CDN获取其图像)。所以他们的图像路径可能看起来像~Some_service_call/images/image.png
。不同SASS/CoffeeScript的基础上构建
我希望能做的是为两种环境准备好某种配置,所以当我在本地开发时,我可以通过终端运行一个命令,如build local package
或build deploy package
,它可以自动识别我部署的环境并使用基于此的路径。我最好有一个单独的配置JSON文件,该文件控制为每个SASS/Coffeescript变量使用哪些路径。
到目前为止,我已经开始考虑咕噜了这一点,但不知道它的正确的解决方案。有没有人曾经尝试过这种类型的东西,有什么工作/不适合你?
使用指南针编译您的项目。
在罗盘的config.rb
定义自定义功能:
# Assign a name to the project and pass it into SASS
$environment = "development"
module Sass::Script::Functions
def environment
Sass::Script::String.new($environment)
end
end
此功能将在上海社会科学院可用:
$images-root: ".."
@if environment() == production
$images-root: "/var/www/static/images"
html
background-image: url(#{$images-root + "/sexy-lady.png"})
而且你可以自定义你的内衬!例如,您可以将路径传递给SASS。或者你可以用一些高级逻辑(服务调用,读取JSON)创建一个单独的Ruby文件,从config.rb
中请求它并传递给SASS函数。
最后,你写一个小的脚本,更新的信息和运行compass compile
。
PS指南针也允许添加的发展和CSS压缩生产调试信息。
如果你不希望创建一个config.rb,只需使用选项环境在gruntfile.js并将其设置为生产或发展:
compass: {
prod: {
options: {
environment: 'production'
}
},
dev: {
options: {
environment: 'development'
}
}
}
和环境值将可在file.scss或file.sass文件:
$font-path: "../fonts";
@if compass-env() == 'production'
{
$font-path: "../assets/fonts"
}
这似乎是SASS的一个很好的方法。你知道在编译过程中是否有类似于CoffeeScript的方法吗?如果它有帮助,我使用Codekit来编译,但我不知道它为此提供的任何功能。 – 2013-04-16 16:51:16
对不起,我不使用CoffeScript(还)。 PS不要忘记接受答案。对于CoffeeScript,更好地提出一个单独的问题。 – 2013-04-16 20:50:00