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 就能針對當前改動到的文件進行單獨編譯了。