Gulp 观看所有文件但只渲染一个 (sass)

Question

我想让 gulp 监视我的工作文件夹中的所有更改，但只生成一个文件。因为我使用 scss 导入所有需要的文件，所以不需要编译所有 .css 个文件，只编译主要的一个。

现在，我的 gulpfile.js 包含：

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

gulp.task('sass', function () {
  return gulp.src('./sass/style.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

我必须进入 ./sass/style.scss 并将其保存到触发 gulp 手表。

我希望 gulp 观看所有文件（类似于 ./**/*.scss）但只呈现一个 - ./sass/style.scss。如何实现？

Answer 1

解决这个问题很简单，只需将 gulpfile.js 的 watch 部分编辑为：

gulp.task('watch', function() {
  gulp.watch('./**/*.scss', ['sass']);
});

其中表示：观察所有 .scss 并随时变化运行 'sass' taks.

'sass' 只编译 ./sass/style.scss'

Answer 2

无需更改 gulpfile.js 中的任何内容。还有另一种更简单的方法，您只需要在所有使用 @import 语句导入的 SCSS 文件中添加下划线（如 _*.scss），这将禁止编译器创建单独的 CSS 个文件。

示例： mymodular.scss => _mymodular.scss

Guidelines from SCSS documentation

Partials You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Gulp 观看所有文件但只渲染一个 (sass)

Gulp watch all files but render only one (sass)

gulp

gulp-sass

gulp-watch