Question

看完Chris Coyer的后

http://www.youtube.com/watch?v=M7W5unPM_b4&list=UUADyUOnhyEoQqrw_RrsGleA

我很想知道 - 在CSS文件构建完成后没有Grunt可以自动运行Autoprefixer Sublime插件吗？我需要在Sublime中配置什么以及如何配置？

理想的链条将是：

构建压缩＆＃34; style -prefixed.css＆＃34;在SASS上保存 - 运行Autoprefixer - 创建压缩＆＃34; style.css＆＃34;

Answer 1

我不是专家，但我想我只是通过shell脚本想出了如何做到这一点。

先决条件：

SublimeOnSaveBuild（ST2插件，也适用于ST3）
SASS编译器（我使用LibSass/SassC）
Autoprefixer（不是ST插件）

在完成所有这些工作之后，我们将创建脚本。出于我们的目的，我们称之为buildcss.sh：

#!/bin/bash
if [ $# == 0 ]
then 
    echo "Usage: buildcss.sh [scss file] [css file]"
    exit
fi

# Create the css file ($2) from a scss file ($1)
# see "sassc -h" for additional options
sassc $1 $2

# Run autoprefixer, overwrite input .css file
# see "autoprefixer -h" for additional options
autoprefixer -b "> 1%" $2

当然，如果您使用Ruby SASS（sass）而不是sassc，则应调整脚本。

好的，在这一步你应该能够运行类似./buildcss.sh style.scss style.css的东西进行测试，并确保该部分有效。然后，只需要让Sublime Text运行并传递正确的参数。

为此，创建一个自定义构建系统。 ST3中Tools > Build System > New Build System...。这里ST2和ST3之间可能存在一些差异，但在ST3中我的配置如下：

{
    "shell_cmd": "/path/to/script/buildcss.sh $file ${file_path/scss/css/}/${file_base_name}.css",
    "selector": "source.scss",
    "line_regex": "Line ([0-9]+):",
}

正如您可能注意到的那样，我专门为scss设置，但如果您需要sass，您可以设置另一个类似的构建系统，交换＆＃34; sass＆＃34;为＆＃34; scss＆＃34;始终。此构建系统还假定您将文件保存在/scss子文件夹中，并且该css文件应位于同一级别的/css子文件夹中。

你有它！每当你保存一个.scss文件时，SublimeOnSaveBuild就会做它的魔法并触发我们的自定义构建，然后调用调用sassc和autoprefixer的脚本。

Sublime Text创建SASS - Autoprefixer - 在没有Grunt的情况下保存的CSS链

1 个答案: