Попытка использовать Gulp для запуска Sass - PullRequest
Новая
       25

Попытка использовать Gulp для запуска Sass

0 голосов
/ 30 мая 2020

Я пытаюсь настроить Gulp для просмотра и компиляции моего файла sass в моем Django проекте

Я следил за приложением do c, чтобы установить gulp. Пробная задача сработала. Каждый ответ, который я видел для нахальства, отличался. Эта версия работает, но не обрабатывается как css change: 

'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, чтобы остановить это.

gulp версии 4.0.2 в MacOS.

Вот как я запускаю 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;

1 Ответ

1 голос
/ 30 мая 2020

Изначально у вас не было 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 в этом случае достаточно, чтобы сигнализировать о завершении asyn c до gulp, чтобы вы могли удалить все ссылки на cb в этом задача.

...