我正在尝试设置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;
您最初没有定义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
的所有引用。 >