尝试使用 Gulp 到运行 Sass

Question

我正在尝试设置 Gulp 来监视和编译我的 Django 项目中的 sass 文件

我按照应用文档安装了 gulp。示例任务有效。我看到运行 sass 的每个答案都不一样。此版本运行s 但它不处理 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!

运行ning 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 才能停止它。

gulp MacOS 上的版本 4.0.2。

我是这样手动的运行 sass:

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

固定

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

'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;

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

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

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

尝试使用 Gulp 到运行 Sass

Trying to Use Gulp to Run Sass

django

sass

gulp

固定

尝试使用 Gulp 到 运行 Sass

Trying to Use Gulp to Run Sass

django

sass

gulp

固定

尝试使用 Gulp 到运行 Sass