如何使用 gulp 运行 SASS 转译？

【问题标题】：How to use gulp to run SASS transpiling?如何使用 gulp 运行 SASS 转译？
【发布时间】：2018-01-06 20:33:45
【问题描述】：

我是 gulp 的新手，想用它来将 SASS 转换为 CSS。我有一个 src 文件夹，里面有一些 scss 文件，我想将它镜像到公用文件夹，但作为 css 文件。这是 gulp 代码

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('src/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/'))
});

//Watch task
gulp.task('default',function() {
    gulp.watch('src/**/*.scss',['styles']);
});

但是当我运行node gulp 时，程序就结束了，没有任何错误或消息。它不应该继续运行以进行文件侦听（即观看）吗？此外，当我编辑 .scss 文件时，它不会使用 .css 文件创建公用文件夹。

谢谢

【问题讨论】：

标签： node.js npm gulp gulp-watch gulp-sass

【解决方案1】：

你需要运行 gulp 没有 node gulp

您还需要在default 之一中添加styles 任务。

gulp.task('watch', function() {
    gulp.watch('src/**/*.scss',['styles']);
});

gulp.task('default', ['watch', 'styles'])

【讨论】：

我试过了，但它没有记录任何东西，即使我编辑 .scss 文件，它也不会创建一个包含 css 文件的公用文件夹。
您是否添加了public 文件夹？尝试在您的任务styles 中使用console.log，如果没有触发您的默认任务就是问题所在。
如何添加公用文件夹？我在样式任务中放了一个 console.log(1)，但它没有运行。
你需要在根目录下添加一个名为public的文件夹（你的gulpfile在哪里）。是否尝试在任务运行后更改 CSS？
我创建了一个公用文件夹，然后又试了一遍，还是不行。