css - 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)

我离得很远吗？

Answer 1

如果我理解正确你想返回 .css文件位置.scss文件存在。这里是 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

希望这有帮助!