使用gulp实时编译sass/sass

背景

在我们新开始的项目中，我们打算使用scss来作为我们的样式书写语言。同时，所有的sass/scss文件经过编译转化成css文件后要存放到跟scss/sass文件相同的目录下。整个前端团队已经有实时的代码编译构建工具，那么我们只需要书写自己的实时scss/sass构建工具，生成对应的css文件后，团队的实时构建工具也会触发编译，做打包构建处理。

第三方包选型

基于gulp的sass/scss编译工具有：基于node-sass的 gulp-sass以及基于Ruby的 gulp-ruby-sass。但是为了免得再安装Ruby以及一些特定的原因（ gulp-ruby-sass与gulp-sass），我选择了使用gulp-sass。

运行方式及运行效果

你需要全局安装gulp：npm install -g gulp,你需要在你项目的根目录下新建gulpfile.js文件。运行方式就是直接在命令行项目根目录下执行：gulp即可。编译成功后会给出编译成功的提示（当然也可以配置关闭该提示），编译失败则会给出编译失败的提示，并且会在命令行控制台打印出详细的错误信息，同时，错误提示的时候会带有音效。在编译之后的css代码，我们使用了cssbeautify对其进行了格式化，同时，你还可以针对自己的需求对其进行语法检查等。