Gulp 编译 SASS 到相关子文件夹

Question

如果我在 components/root/sass/index.scss 中有一个文件，我如何将它编译成 components/root/styles/index.css？简单地说，我想用 styles 替换路径中的 sass，即如果我在 components/second/sass/file.scss 有一个文件，它将编译为 components/second/styles/file.css.

这是我在 gulpfile.js 中的当前代码：

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

gulp.task('sass', function() {
  return gulp.src('components/**/sass/*.scss', {base: "./"})
    .pipe(sass())
    .pipe(gulp.dest('../styles/'));
})

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

Answer 1

重命名替换“/sass”位的每个路径，并通过 "gulp-rename" 模块进行扩展。

我建议将路径通配到一个变量中，将 watch 作为一个独立的任务，并将默认任务与 "sass" 和 "watch" 任务一起使用。

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

var componentsGlob = './components/**/sass/*.scss';

gulp.task('sass', function() {
  return gulp.src(componentsGlob)
    .pipe(sass())
    .pipe(rename (function(path) {
      path.dirname = path.dirname.replace('/sass', '/styles');
      path.extname = ".css";
    }))
    .pipe(gulp.dest('./components/'));
});

gulp.task('watch', function () {
  gulp.watch(componentsGlob, ['sass']);
});

gulp.task('default', ['sass', 'watch']);

Answer 2

无需 gulp-重命名 :

gulp.task('sass', function() {
  return gulp.src('components/**/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('components/root/styles'));
})

基本上，'components/root/styles' 将替换您的 src glob 开始之前的所有内容，或者在您的情况下，'components'。

Gulp 编译 SASS 到相关子文件夹

Gulp compile SASS into relative subfolder

css

sass

gulp

gulp-watch