git 项目类型 css_Git挂钩和CSS预处理程序

git 项目类型 css

For one of my recent projects, I've decided to use Stylus.  I'm accustomed to using Sass but that would require adding Ruby to our stack -- Stylus is Node.js-based, and since I'm already using Node.js for a few other tasks, I thought I'd give Stylus a try.  Since I'm heavily developing the front-end of the project, I'm either fixing bugs or creating new features, all of which requires heavy CSS edits.  The problem I'm running into is that I'm forgetting to reprocess stylesheets when I switch branches, so pages start to look funky and I start having heart attacks.

对于我最近的项目之一，我决定使用Stylus。 我习惯于使用Sass，但是这需要向我们的堆栈中添加Ruby-Stylus基于Node.js，并且由于我已经在使用Node.js来完成其他一些任务，所以我想我应该给Stylus一个尝试。 由于我正在大力开发项目的前端，因此我正在修复错误或创建新功能，所有这些都需要对CSS进行大量编辑。 我遇到的问题是，在切换分支时，我忘记了重新处理样式表，因此页面开始显得时髦，并且开始出现心脏病发作。

Seeing as my memory is faulty, I've been looking for an automated solution to this problem.  Stylus has a "watch" feature but I've found it slow and I'm impatient.  Next I turned to git hooks.  I've always heard about them but never spent much time with them -- big mistake.  To solve my branch-switching, preprocessor blues, I created a post-checkout hook.  Bang!

鉴于我的内存有故障，我一直在寻找针对此问题的自动解决方案。 手写笔具有“监视”功能，但是我发现它运行缓慢，我很急。 接下来，我转向git hooks。 我一直都听说过它们，但从未与他们共度时光-这是个大错误。 为了解决我的分支切换，预处理程序蓝调问题，我创建了一个检出后挂钩。 砰!

The first step is placing a file called post-checkout (no extension) in the project's .git/hooks directory:

第一步是在项目的.git/hooks目录中放置一个名为post-checkout (无扩展名)的文件：

cd .git/hooks && touch post-checkout

Next up is running my compile script.  The compile script is an external file (it's hooked into our build process) so all I need to do is run it:

接下来运行我的编译脚本。 编译脚本是一个外部文件(已挂接到我们的构建过程中)，因此我需要做的就是运行它：

#!/bin/sh
./scripts/compile-scripts

In case you want to see my CSS compile script, here it is:

如果您想查看我CSS编译脚本，这里是：

#!/bin/sh

BASEDIR=$(dirname $0)
CSSDIR=$BASEDIR/../media/redesign/css/

if [ ! -d "$CSSDIR" ]; then
	mkdir $BASEDIR/../media/redesign/css/
fi

for file in main print wiki demo-studio profile search zones home
do
	stylus $BASEDIR/../media/redesign/stylus/$file.styl --out $BASEDIR/../media/redesign/css --compress
done

I probably don't need to tell you how awesome git hooks are, but in the case of instant CSS preprocessing, git hooks are a big help!

我可能不需要告诉您git钩子有多棒，但是对于即时CSS预处理，git钩子有很大帮助！

翻译自: https://davidwalsh.name/git-hooks

git 项目类型 css