Gulp 监视所有文件，但只渲染一个（sass）答案

【问题标题】：Gulp watch all files but render only one (sass)Gulp 监视所有文件，但只渲染一个（sass）
【发布时间】：2015-08-22 21:33:10
【问题描述】：

我想让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 watch。

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

【问题讨论】：

标签： gulp gulp-watch gulp-sass

【解决方案1】：

解决方案很简单，只需将gulpfile.js 的watch 部分编辑为：

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

其中说：关注所有.scss 并在更改运行'sass' taks。

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

【讨论】：

【解决方案2】：

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

示例： mymodular.scss => _mymodular.scss

Guidelines from SCSS documentation

部分您可以创建部分 Sass 文件，其中包含可以包含在其他 Sass 文件中的少量 CSS 的 sn-ps。这是一个模块化 CSS 并帮助使事情变得更容易的好方法维持。 partial 是一个以下划线开头的 Sass 文件。您可以将其命名为 _partial.scss。下划线让 Sass 知道该文件只是部分文件，它不应该生成一个 CSS 文件。 Sass 部分与 @use 一起使用规则。

【讨论】：