先是安装

npm install --global gulpnpm install gulp-sass --save

安装好后输入命令行 gulp-sass -v 查看是否按照成功

gulp的用法在这里：

 

粗略了解一下常用的gulp API

gulp.task(name[, deps], fn)：建立任务，在命令行中输入任务名字来执行任务；

gulp.src(globs[, options])： 输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件，（简单的来说就是引入需要操作的文件）；

gulp.watch(glob [, opts], tasks)： 监控文件的变动；

gulp.dest(path[, options])： 能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。（处理完的文件需要存放在哪里）

以下是gulp-sass官网的代码

'use strict'; var gulp = require('gulp');var sass = require('gulp-sass'); gulp.task('default',function() {    gulp.task('sass', function () {      return gulp.src('./sass/**/*.scss')        .pipe(sass().on('error', sass.logError))        .pipe(gulp.dest('./css'));    });         gulp.task('sass:watch', function () {      gulp.watch('./sass/**/*.scss', ['sass']);    });});

 

在这里把编译scss文件设置为默认执行的任务，只需cmd输入gulp命令就能监听scss文件的改变而编译了。

 

从cmd的提示可以看到已经编译成功了，可是只改了一个文件却把目录里面所有的文件都过一遍了。

但我只需要编译当前修改到的文件就好了，所以稍微改了一下：

function parseScssSingleFile(file) {    //file = file.replace(/^[^\s]*\\wxstyle/g, 'wxstyle');    var destUrl = file.replace(/wxscss/,'release');    var arr = destUrl.split('\\');    destUrl = destUrl.replace(arr[arr.length - 1], ''); return gulp        .src(file)        .pipe( gulpScss().on('error', gulpScss.logError) )        .pipe( gulp.dest( destUrl) )        .pipe(reload({stream:true}));}gulp.watch(releaseFolder + 'wxscss/**/*.scss',function(event) {    parseScssSingleFile(event.path);});

 

试了一下能运行成功了：

这里主要是使用gulp.watch()监控文件的改动，并且传入event对象。event描述了所监控到的变动，event.path是触发了该事件的文件路径

把当前变动的文件路径传给parseScssSingleFile 就能针对当前改动到的文件进行单独编译了。