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

v9tzhpje  于 2022-12-08  发布在  Gulp
关注(0)|答案(2)|浏览(149)

我想让gulp监视我的工作文件夹上的所有更改,但只生成一个文件。因为我使用scss导入所有需要的文件,所以不需要编译所有.css文件,只需要编译main文件。
现在,我的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,把它保存到triger gulp watch。
我想让gulp查看所有文件(比如./**/*.scss),但只渲染一个文件-./sass/style.scss。如何实现?

6ojccjat

6ojccjat1#

解决这个问题很简单,只需编辑gulpfile.jswatch部分为:

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

它说:注意所有.scss和更改运行'sass' taks
'sass'只编译./sass/style.scss'

50pmv0ei

50pmv0ei2#

不需要更改gulpfile.js中的任何内容。还有另一个更简单的方法,您只需向所有使用@import语句导入的SCSS文件添加下划线(如_*.scss),这将禁止编译器创建单独的CSS文件。
例如:mymodular.scss =〉_mymodular.scss
SCSS文档中的指南

Partials您可以创建包含CSS小片段的部分Sass文件,这些片段可以包含在其他Sass文件中。这是模块化CSS的好方法,有助于使内容更易于维护。Partial是一个以前导下划线命名的Sass文件。您可以将其命名为_partial. scss。下划线让Sass知道该文件只是一个部分文件,不应该生成CSS文件。Sass部分文件与@use规则一起使用。

相关问题