Question

如果我在components/root/sass/index.scss内有文件，如何将其编译为components/root/styles/index.css？简单地说，我想用sass替换路径中的styles，即如果我在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

重命名每个路径，替换＆＃34; / sass＆＃34; bit和它的扩展通过＆＃34; gulp-rename＆＃34;模块。

我建议在变量中使用路径globbing，将watch作为一个独立的任务，并使用＆＃34; sass＆＃34;和＆＃34;观看＆＃34;任务。

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-rename：

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

基本上，＆＃39;组件/ root / styles＆＃39;将在src glob开始之前替换所有内容，或者在您的情况下，替换＆＃39;组件＆＃39;。

Gulp将SASS编译为相对子文件夹

2 个答案: