实现功能
　　监听scss文件　　
　　sass自动化
准备条件
　　1 .安装gulp
　　　　npm init   ---->一直enter，会在当前目录下生成一个package.json文件,记录安装的依赖模块
　　　　npm install gulp --save-dev  
　　2 .安装gulp-sass
　　　　npm install gulp-sass 
　　3 .创建gulpfile.js文件
上述都搞定！
 
执行npm init的命令配置好package.json，然后再在当前目录下本地安装gulp，执行命令npm install gulp --save-dev（我通常安装淘宝镜像，所以执行cnpm install gulp --save-dev），安装好gulp之后继续安装gulp-sass插件：npm install gulp-sass --save-dev（都是局部安装的，方便require引入），到这，相关前期准备就算好了。
package.json文件：
{
  "name": "site",
  "version": "1.0.0",
  "description": "前端开发环境gulp 实现sass自动化 ，监听同步",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
 
首先在src文件夹下面新建一个scss文件夹，scss下面新建2个scss后缀的文件，分别是style.scss和index.scss
index.scss文件代码：
$background: red;
div{
    background:$background;
}
style.scss文件代码：
$width:100px;
div{
    width:$width;
}
 
gulpfile.js 文件
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
        return gulp.src('src/scss/*.scss')
        .pipe(sass({outputStyle: 'compressed'})).on('error', sass.logError) // 错误信息
        .pipe(gulp.dest('dist/css'));//输出路径
      }
);
 
gulp.src()下是待处理文件，调用sass方法，输出到gulp.dest()下的文件夹（同名输出，文件夹会自动创建）：
*.scss 匹配当前目录下所有以.scss结尾的文件
**/*.scss 匹配前目录及所有子目录下，所有以.scss结尾的文件
!not-me.scss不包含名为not-me.scss文件
*.+(scss|sass) 匹配当前目录下所有以.scss或者.sass结尾的文件
 
指定选项
但是，如果我们仔细观察最后编译生成的CSS文件，会发现每一个”}”并没有像标准CSS那样单独换行显示。如果想要实现该效果，可以向我们的gulp-sass插件添加对应的选项：
.pipe(sass({
      outputStyle: 'expanded'
    }))
sass默认输出的样式风格是嵌套输出的方式，同时还有其他方式：嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed
可以在调用sass方法那里修改输出格式：sass({outputStyle: 'expanded'}).on('error', sass.logError)
 
watch功能呢
如果想监听修改编译，只需要增加wacth就可以了：
 gulp.task('dist',function(){
     gulp.watch('src/scss/*.scss',['sass']);// 监听的文件
 });