Gulp 4观看所有Sass文件,编译其中一个

时间:2019-06-27 18:26:25

标签: npm sass gulp gulp-watch

我的文件结构是:

sass
-main.sass
-variables.sass
-containers.sass
-buttons.sass
-helpers.sass

css
-main.css

在我的main.sass文件中,我将导入所有其他sass文件:

@import "variables";
@import "containers"; 
@import "buttons"; 

//etc...

在gulp中,我想观看任何已更改的scss文件,仅将main.sass编译为main.css

这就是我所拥有的:

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

function styles() {
  return gulp.src('sass/main.sass', {
    sourcemaps: true
  })
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('css/'));
}

function watch() {
  gulp.watch('sass/**/*.sass', styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task('default', build);

正在监视文件,但是当我更新文件时,main.css文件没有更新。

1 个答案:

答案 0 :(得分:0)

我相信您的问题之一可能是您通过CurrencyData currencyDataUSD = connectionService.gsonCurrency(connectionService.connect("USD")); CurrencyData currencyDataEUR = connectionService.gsonCurrency(connectionService.connect("EUR")); // and go on if you like 定义了监视任务,但是它的引用丢失了,因此它永远不会被调用。但是,我不太了解您通过调用gulp.watch(...)会达到什么目的。我目前正在使用类似如下的构建脚本来研究类似的用例:

parallel()

这应该是一个最小的工作示例,只需调用var gulp = require('gulp'); function styles() { return gulp.src('...') .pipe(...) .pipe(gulp.dest('...')); } exports.build = gulp.watch('...', styles);