尝试使用 Gulp 运行 Sass答案

【问题标题】：Trying to Use Gulp to Run Sass尝试使用 Gulp 运行 Sass
【发布时间】：2020-09-17 16:09:05
【问题描述】：

我正在尝试设置 Gulp 以在我的 Django 项目中查看和编译我的 sass 文件

我按照应用文档安装 gulp。示例任务有效。我看到的每个运行 sass 的答案都是不同的。此版本运行但不处理 scss 更改：

'use strict';

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

sass.compiler = require('node-sass');

function defaultTask(cb) {
  gulp.watch('base/static/base/css/stylesheets/main.scss', sassCompile);
   cb();
 }
exports.default = defaultTask

function sassCompile(cb) {
  return gulp.src('base/static/base/css/stylesheets/main.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('base/static/base/css/main.css'));
  cb();
}
exports.sass = sassCompile;

// function watch() {
//   gulp.watch('base/static/base/css/stylesheets/main.scss', sassCompile);
// }
// exports.watch = watch; // don't forget to export your command!

运行 gulp 的输出是：

[22:17:09] Using gulpfile ~/htdocs/myproject/gulpfile.js
[22:17:09] Starting 'default'...
[22:17:09] Finished 'default' after 3.29 ms

我必须按 ctrl-C 来阻止它。

MacOS 上的 gulp 版本 4.0.2。

这就是我手动运行 sass 的方式：

/usr/local/bin/sass base/static/base/css/stylesheets/main.scss: base/static/base/css/main.css

已修复

根据@Mark 的 cmets，这是工作版本：

'use strict';

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

sass.compiler = require('node-sass');

function defaultTask() {
  gulp.watch('base/static/base/css/stylesheets/**/*.scss', sassCompile);
 }
exports.default = defaultTask

function sassCompile() {
  return gulp.src('base/static/base/css/stylesheets/main.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('base/static/base/css'));
}
exports.sass = sassCompile;

【问题讨论】：

好吧，你没有显示sass 任务。你确实有一个watch 和一个default 任务。您需要一个sass 任务，您需要将gulp.src 发送到pipe(sass())。网上有很多最近的例子。查看gulp-sass 文档。（而且我不会同时调用我的任务sass 和插件sass，因为它迟早会令人困惑。）
@马克。我又试了一个例子
我现在发现您的代码没有任何问题，除了 gulp.dest() 采用目录名称。 Sass 会自动创建main.css 文件。 sassCompile 中的 cb and cb() 是不必要的，并且由于 return 语句而无论如何都不会到达 - 这本身就足够了。用这些更改测试了您的代码，它工作正常。
"我必须按 ctrl-C 来阻止它。"这是正常的 - 它一直在监视文件更改，直到您终止任务。
@Mark，修复了它。如果您输入它作为答案，我会接受。

标签： django sass gulp

【解决方案1】：

您最初没有定义sass 任务，例如：

function sass2css() {
  return gulp.src('relative path (from the gulpfile.js file) to your main.scss')
    .pipe(sass()) 
    .pipe(gulp.dest('must be a directory name here'));
}

是一般形式。在您编辑的问题中，您添加了一个 sass 任务，该任务在 gulp.dest() 调用中使用了文件名 (....main.css)。我指出应该是一个目录名，main.css 是由gulp-sass 自动创建的，所以不需要自己命名。否则，我测试了您的代码并且它正在工作。

您的sassCompile 任务中还有cb（回调函数）和return 语句。由于return 语句和return 语句在这种情况下足以向gulp 发出异步完成信号，因此永远不会到达cb() 调用，因此您可以在此任务中删除对cb 的所有引用。

【讨论】：