gulp-sass

 

先是安装

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

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

gulp的用法在这里：http://www.gulpjs.com.cn/docs/getting-started/

 

粗略了解一下常用的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 就能针对当前改动到的文件进行单独编译了。