2

クリス・コイヤーを見た後

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

私は疑問に思っていました-CSSファイルがビルドされた直後にGruntなしでAutoprefixer Sublimeプラグインを自動実行することは可能ですか? Sublime で何をどのように設定する必要がありますか?

理想的なチェーンは次のとおりです。

SASS 保存時に圧縮された「style-unprefixed.css」をビルド - Autoprefixer を実行 - 圧縮された「style.css」を作成

4

1 に答える 1

3

私は専門家ではありませんが、シェルスクリプトを介してこれを行う方法を見つけたと思います。

前提条件:

すべての処理が終わったら、スクリプトを作成します。私たちの目的のために、それを呼びましょう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

もちろん、のsass代わりに Ruby SASS ( )を使用している場合sasscは、スクリプトを調整する必要があります。

./buildcss.sh style.scss style.cssさて、このステップで、テストなどを実行して、その部分が機能することを確認できるはずです。次に、Sublime Text にそれを実行させ、正しい引数を渡すだけです。

そのために、カスタム ビルド システムを作成します。Tools > Build System > New Build System...ST3で。ここでは 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 が必要な場合は、「sass」を「scss」に置き換えて、別の同様のビルド システムをセットアップできます。/scssまた、このビルド システムでは、ファイルをサブフォルダーに保持し、css ファイルを/css同じレベルのサブフォルダーに配置する必要があることも前提としています。

そして、あなたはそれを持っています！.scss ファイルを保存するたびに、SublimeOnSaveBuild が魔法のようにカスタム ビルドを起動し、sassc と autoprefixer を呼び出すスクリプトを呼び出します。

于 2014-12-12T05:19:59.470 に答える