Gulp手表什么都不做

Question

在本教程之后,我已经设置了一个基本的gulp配置以及一个我想.css用gulp-sass 编译成的.scss文件.当我从控制台运行gulp watch时,监视任务注册正常,但是当我编辑.scss文件时没有任何反应,我无法弄清楚原因.

gulpfile.js

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

//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',  
    cssDest = 'assets/styles/css/';

gulp.task('styles', function(){  
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function() {  
    gulp.watch('sassFiles',['styles']);
});

终端输出:

shooshte@M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms

Answer 1

你传递'sassFiles'(作为一个字符串)而不是sassFiles变量.

gulp.task('watch', function() {  
    gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles 
});

我还注意到你将sassFiles变量传递给你的样式任务.我有点模糊,但我认为这不起作用,而且更多它可能,正如所建议的那样,表明目录结构不佳.

关于如何构建sass项目的建议方法各不相同,但都有一个共同的因素.他们建议将你的sass分解为以下划线为前缀的部分内容

/styles
  application.scss
  _footer.scss
  _header.scss
  _sidebar.scss

然后将它们全部导入到单个顶级scss文件中.application.scss

@import "footer";
@import "header";
@import "sidebar";

然后,您可以告诉样式任务进行编译,application.scss并且所有引用为引入的文件将自动被拉入.

gulp.task('styles', function(){  
    gulp.src('assets/styles/sass/application.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});