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

Question

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

例如，以下是我当前的文件夹结构：

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

这是我的"gullfile.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

如果我理解正确，您希望返回存在.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

希望得到帮助！

Answer 2

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

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

Answer 3

gulp.src告诉Gulp任务要为任务使用什么文件，

而CCD_ 13告诉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/**'))
});