Gulp没有将SCSS转换为CSS

Question

我无法使用gullow将SASS代码自动编译为CSS。我错过了什么？

文件结构：

public
-css
--styles.css
-index.html
sass
-styles.scss
gulpfile.js
package.json

Gulpfile:

var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');
gulp.task('serve', function() { browserSync.init({ server: "./public" });
gulp.watch("scss/**/*.scss", ['sass']);
gulp.watch("public/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("scss/styles.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("public/css/styles.css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['sass', 'serve']);

Package.json:

{
"name": "gulptest",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"autoprefixer": "^9.3.1",
"browser-sync": "^2.26.3",
"cssnano": "^4.1.7",
"gulp-postcss": "^8.0.0",
"gulp": "^3.9.1",
"gulp-sourcemaps": "^2.6.4"
},
"devDependencies": {
"gulp-sass": "^4.0.2"
},
"scripts": {
"dev": "gulp"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Answer 1

您有两个问题：

正如@cale_b所说，您正在查看错误的目录，并且您在sass任务中的源代码是错误的。所以使用这个：

gulp.task('serve', function() { browserSync.init({ server: "./public" });
//gulp.watch("scss/**/*.scss", ['sass']);
gulp.watch("sass/**/*.scss", ['sass']);
gulp.watch("public/*.html").on('change', browserSync.reload);  
});
gulp.task('sass', function() {
//return gulp.src("scss/styles.scss")
return gulp.src("sass/styles.scss")
.pipe(sass().on('error', sass.logError))
// and dest takes directories only, not file names
// sass will automatically produce styles.css
.pipe(gulp.dest("public/css"))
.pipe(browserSync.stream());
});

Answer 2

这是我的工作吞咽sass设置：

gulp.task('sass', function() {
gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css/'));
});
gulp.task('watch', function(){
gulp.watch(['scss/*.scss'], ['sass']);
});

它似乎有来源冗余，但它是有效的。