?

先是安裝

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

?

轉載于:https://www.cnblogs.com/Travel/p/5036787.html

總結

以上是生活随笔為你收集整理的gulp-sass的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。