尝试使用Gulp来运行Sass

问题描述 投票:0回答:1

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

我按照应用程序文档安装了gulp。该示例任务正常运行。我见过的每一个回答都不同。该版本可以运行,但是不能处理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的评论,这是有效的版本:

'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;
django sass gulp
1个回答
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任务,该任务在....main.css调用中使用了文件名(gulp.dest())。我指出应该是目录名,并且main.css是由gulp-sass自动创建的,因此无需自己命名。否则,我会测试您的代码,并且可以正常工作。

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

© www.soinside.com 2019 - 2024. All rights reserved.