Gulp：在同一文件夹中将 SASS 编译为 CSS答案

【问题标题】：Gulp: Compile SASS to CSS in the same folderGulp：在同一文件夹中将 SASS 编译为 CSS
【发布时间】：2020-07-07 01:08:44
【问题描述】：

我正在尝试建立一个模块化的工作流程，当运行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)

我离得远吗？

【问题讨论】：

根据他们的例子，你可以试试gulp.dest('modules')见gulpjs.com/docs/en/api/dest#sourcemapsdest没有提到支持通配符
@Freddy 请检查我的答案，如果有任何问题请告诉我
感谢大家的回答。我选择了最佳答案，因为它也允许我使用gulp watch。

标签： css sass gulp gulp-sass

【解决方案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

希望对您有所帮助！

【讨论】：

【解决方案2】：

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/**'))
});

【讨论】：

【解决方案3】：

gulp.dest() 只想要一个路径，然后它将当前文件路径附加到它。 sass() 已经将扩展名更改为 css，所以这也不应该成为问题。所以在你的情况下它应该像这样工作。

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

【讨论】：