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

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

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

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

Answer 3

如果我理解正确的话，你想要 return .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

会return

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

希望对您有所帮助！

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

Gulp: Compile SASS to CSS in the same folder

css

sass

gulp

gulp-sass