实现功能
  监听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']);// 监听的文件
 });