Question

在this tutorial之后，我设置了一个基本的gulp配置以及一个.scss文件，我希望使用gulp-sass编译成.css。当我从控制台运行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变量传递给你的样式任务。我有点模糊，但我认为这不起作用，而且更多它可能，正如所建议的那样，表明目录结构不佳。

how to structure a sass project的建议方法各不相同，但都有一个共同的因素。他们建议将你的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));
});

Gulp手表什么都不做

1 个答案: