Powershell 构建 - 编译 SASS答案

【问题标题】：Powershell build - compiling SASSPowershell 构建 - 编译 SASS
【发布时间】：2015-07-22 03:09:50
【问题描述】：

我希望开始在使用 Web Workbench 的 Visual Studio 2010 项目中使用 SASS - 但是通过 TFS 进行版本控制的问题让我很困惑。为了避免覆盖其他人的更改，我理解输出的 CSS 应该从源代码管理中排除，并且 SCSS 应该在构建过程中编译到 CSS 服务器端。目前我们使用 Powershell 脚本进行构建，但我似乎找不到任何有关如何在 Powershell 中合并 SCSS 编译的信息。有没有关于这个过程的像样的文档？

【问题讨论】：

您运行的是哪个版本的 Visual Studio？
VS2010 - 更新问题

标签： css powershell tfs sass

【解决方案1】：

您需要一个 SASS 编译器，而且您的工作量可能会有所不同。原始编译器是用 Ruby 编写的，因此，如果您想使用它，您必须安装 Ruby、SASS gem 并从您的 Powershell 脚本调用 sass。另一种选择是使用不需要 Ruby 运行时的兼容编译器，例如 SassC 或 C6。

【讨论】：

【解决方案2】：

我认为我缺乏使用 Powershell/构建脚本的经验，这让我想多了。我采取了以下步骤：

1) 从这里安装 Ruby for Windows：https://www.ruby-lang.org/en/documentation/installation/

2) 打开命令提示符 -> 输入gem install ruby

3) 打开 PowerGUI 脚本编辑器（已经安装，但可以在这里下载：http://software.dell.com/products/powergui-freeware/）

4) 创建了一个函数来执行以下操作：sass -t compressed "path\sassInput.scss" "path\sassOutput.css"

然后很快。我确实希望有一种方法可以为目录中的每个 .scss 文件而不是部分执行此操作，但这足以让我现在开始。

更新：这就是我最终得到的 Powershell 脚本：（注意 $dirpath 在其他地方设置为我项目的根目录）

$stylesheetPath = $dirpath + "App_Themes\"
$files = Get-ChildItem $stylesheetPath -Filter *.scss 
for ($i=0; $i -lt $files.Count; $i++) {
    $file = $files[$i]
    $fileName = $file.BaseName
    $filePath = $file.FullName
    if (-not $fileName.StartsWith("_")) {
        $newFilePath =  "$stylesheetPath$fileName.css"
        sass -t compressed $filePath $newFilePath
    }
}

【讨论】：

想象一下使用非部分前缀''字符的约定。在这种情况下，您运行 Get-ChildItem '*.scss' -Recurse | %{ sass -t 压缩 $_.FullName "$($_.FullName -replace '\.scss','.css')" }
感谢@GiulioVian - 我最终做了一些不同的事情，但你为我指明了正确的方向。

【解决方案3】：

安装 Node.JS (https://nodejs.org/download/)
为 Windows 安装 Ruby (http://rubyinstaller.org/)
在您的项目目录中运行 npm init 以创建 packages.json 文件。
安装 grunt npm install grunt --save-dev (http://gruntjs.com/getting-started)
安装 grunt-contrib-sass npm install grunt-contrib-sass --save-dev
在您的项目根目录中创建一个空的Gruntfile.js

将以下内容添加到您的gruntfile.js

module.exports = function(grunt) {
   // Do grunt-related things in here
};

按照此处的说明创建 grunt-sass 任务：https://github.com/gruntjs/grunt-contrib-sass 自述文件末尾提供了一些简单的示例。
从项目根目录中的 powershell 窗口运行 grunt。
利润！

这个 sn-p 可能会在将其添加到您的自动构建脚本时有所帮助：

push-location c:\dev\project
grunt
pop-location

【讨论】：

【解决方案4】：

我遇到了同样的问题。你有这个，因为 powershell 有限制的可执行策略。 接下来你可以做： 0. 安装node.js、npm、 node-sass

以管理员身份运行 PowerShell
使用Get-ExecutionPolicy检查政策 你会看到受限
查看所有政策Get-ExecutionPolicy -List
运行Set-ExecutionPolicy -ExecutionPolicy Unrestricted
按“Y”

使用 node-sass -w ./input.scss ./output.css

另外，你可以阅读更多here

【讨论】：