gulp自动编译sass

1.mkdir project  

2.cd project

3.新建package.json文件，并写入一对空{}

3. sudo npm install gulp --save-dev

4.sudo npm install gul-sass --save-dev

5.新建css, scss目录

5.新建gulpfile.js，引入gulp和gulp-sass:

var gulp = require('gulp'),
    sass = require('gulp-sass');

　　

创建一个名为sass的task任务

gulp.task('sass', function(){
　　return gulp.src('./scss/**/*.scss') // 匹配要编译的目录和文件
　　　　　　.pipe(sass({outputStyle: 'compact'}).on('error', sass.logError)) // 通过管道传输给sass()方法进行处理，同时进行相关配置
　　　　　　.pipe(gulp.dest('./css')); // 通过管道传输,将编译好的scss文件转换成了css文件，根据配置，放到指定文件下

})

输入gulp sass ，就会执行编译 

这样一个简单的gulp 编译sass配置就完成了，但还无法实现监听（watch），即当我们改变scss文件内容，gulp自动监听并编译。

为了实现watch功能，需要新建一个task：

gulp.task('watch', function() {
    gulp.watch('./scss/**/*.scss', ['sass']); // 第一个参数是要监听的目录和文件，第二个参数是监听的目录和文件只要有改动，那么就执行名为sass的task任务
});　　

输入 gulp watch 

这样gulp的自动监听编译sass功能配置就基本完成了，

但是当我们编写的sass文件当中出现语法错误时，gulp监听就会报错，然后自动监听并重新编译的功能会失效，

为了最终能实现输入gulp，就能自动监听，还需要一些操作

1. sudo npm install gulp-notify --save-dev

2. 在项目中新建handleErrors.js文件

var notify = require('gulp-notify');
module.exports = function(){

    var args = Array.prototype.slice.call(arguments);

    notify.onError({
        title: 'compile error',
        message: '<%=error.message %>'
    }).apply(this, args);//替换为当前对象

    this.emit();//提交
}

　　

创建handleErrors.js的目的是为了替换gulp-sass自带的错误处理方法

回到gulpfile.js文件，引入handleErrors.js：

var handleErrors = require('./handleErrors.js');  //注意引入路径，handleErrors根据需要随意放置，只要引入正确即可

　　

找到这一行代码：

.pipe(sass({outputStyle: ''compact}).on('error', sass.logError)) // 不使用sass.logError 
替换为
.pipe(sass({outputStyle: 'compact'}).on('error', handleErrors)) // 用我们自己写的handleErrors替代处理错误

3. 添加一个名为default的task任务：

gulp.task('default', ['sass', 'watch']); 

这样在命令行输入gulp，gulp默认会去找名为default的task任务，并且顺带执行sass，和watch任务。

大功告成。

 

最后还要注意一点：

 

一般scss目录下有一个main.scss文件，作为入口文件, 引入其他scss文件，除了mian.scss文件，其余scss文件要加下划线_

例如_variables.scss , 这样css目录下最终只生成一个mian.css文件。