Gulp: 在同一文件夹中编译SASS为CSS

Question

我试图建立一个模块化的工作流程，在运行 gulp 时，它会将文件夹中的SASS文件编译成CSS。这些新的CSS文件将存储在同一文件夹中。

例如，这是我的当前文件夹结构:

theme
   - modules
      - hero
         - hero.html
         - hero.scss

这是我的 'gulpfile.js' 文件：

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

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**/*.css'))
});

不过，当运行 gulp sass 时，我的文件夹结构看起来像这样：

theme
   - **
      - *.css
         - hero
            - hero.css
   - modules
      - hero
         - hero.html
         - hero.scss

我需要的是：

theme
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (hero.css to appear here after running gulp)

我翻译为：我离谱了吗？

- Freddy

---

根据他们的示例，您可以尝试使用 gulp.dest('modules')。请参阅https://gulpjs.com/docs/en/api/dest#sourcemaps。`dest`不支持通配符。 - Ruan Mendes

@Freddy，请检查我的答案并告诉我是否有任何问题。 - cauchy

感谢大家的回答。我选择了最佳答案，因为它让我也能使用 gulp watch。 - Freddy

Answer 1

如果我理解正确，您想返回存在.scss文件的.css文件。这里是gulpfile.js代码。

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}
function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {

    scss()

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

package.json 文件需要包含 devDependencies 和 browserlist。格式如下。

"devDependencies": {
    "autoprefixer": "^9.7.4",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2"
  },
  "browserslist": [
    "last 71 version"
  ],

使用$ gulp watch命令来运行你的任务。

你的文件夹结构应该是这样的：

Themes
    modules
        hero
            hero.html
            hero.scss
        header
            header.html
            header.scss
        footer
            footer.html
            footer.scss
    package.json
    gulpfile.js

它将返回

Themes
    modules
        hero
            hero.html
            hero.css
            hero.scss
        header
            header.html
            header.css
            header.scss
        footer
            footer.html
            footer.css
            footer.scss
    package.json
    gulpfile.js

希望这有所帮助！

- Rahul

Answer 2

gulp.dest() 只需要一个路径，它会将当前文件的路径附加到该路径之后。而 sass() 已经将扩展名更改为 css，因此这不应该是问题。所以在您的情况下，它应该像这样工作。

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

- Karl-Johan Sjögren

Answer 3

gulp.src 告诉 Gulp 任务使用哪些文件，

而 gulp.dest 则告诉 Gulp 在任务完成后将文件输出到哪里。

因此，在您的情况下，它应该像这样工作

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

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

- cauchy