Компиляция jade

@Максим_М21 · Регистрация: 11.12.2013

Студворк — интернет-сервис помощи студентам

Добрый день. Подскажите пожалуйста как настроить компиляцию jade одновременно с livereload. Вот мой код:

gulpfile.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var gulp = require('gulp'),
  jade = require('gulp-jade'),
  connect = require('gulp-connect'),
  livereload = require('gulp-livereload');
 
//connect server
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});
 
//css
gulp.task('css', function () {
  gulp.src('app/css/style.css')
    .pipe(connect.reload());
});
 
//html
gulp.task('html', function () {
  gulp.src('app/index.html')
    .pipe(connect.reload());
});
 
// Jade
gulp.task('jade', function(){
  gulp.src('app/jade/index.jade')
    .pipe(jade())
    .pipe(gulp.dest('app/'))
});
 
 //watch
gulp.task('watch', function () {
  gulp.watch(['app/css/style.css'], ['css'])
  gulp.watch(['app/index.html'], ['html'])
  gulp.watch(['app/jade/index.jade'], ['jade'])
});
 
//default
gulp.task('default', ['connect', 'html', 'css', 'jade', 'watch']);

package.json

JavaScript
1
2
3
4
5
6
7
8
9
10
{
  "name": "gulp-project",
  "version": "0.1.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^3.2.2",
    "gulp-jade": "^1.1.0",
    "gulp-livereload": "^3.8.1"
  }
}

@BANO · 12.04.2016, 20:55

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
 
gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});
 
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

вы вообще читаете документацию к модулям, которые устанавливаете?

Добавлено через 3 минуты
Максим_М21, а
извеняюсь. не заметил, что у вас джад почему-то отдельно запускается
ну да не важно
в любом случае сначала надо документацию читать, потому как ваша проблема решается довольно легко

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var gulp = require('gulp'),
  jade = require('gulp-jade'),
  connect = require('gulp-connect'),
  livereload = require('gulp-livereload');
 
//connect server
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});
 
//css
gulp.task('css', function () {
  gulp.src('app/css/style.css')
    .pipe(connect.reload());
});
 
//html
gulp.task('html', ["jade"], function () {
  gulp.src('app/index.html')
    .pipe(connect.reload());
});
 
// Jade
gulp.task('jade', function(){
  gulp.src('app/jade/index.jade')
    .pipe(jade())
    .pipe(gulp.dest('app/'))
});
 
 //watch
gulp.task('watch', function () {
  gulp.watch(['app/css/style.css'], ['css']);
  gulp.watch(['app/index.html', 'app/jade/index.jade'], ['html']);
});
 
//default
gulp.task('default', ['connect', 'html', 'css', 'watch']);

@Максим_М21 · 12.04.2016, 21:39 **[ТС]**

Спасибо, помогли. Теперь выскочила следующая проблема. При компиляции Сасс, все работает хорошо, до тех пор пока я не подключаю другой файл (@import '_body.scss'

. В консоли выдает, что файл не найдет.

@BANO · 12.04.2016, 22:27

Максим_М21, это может быть из-за пути
вы поиграйтесь
например @import '../_body.scss'

@Максим_М21 · 12.04.2016, 22:50 **[ТС]**

Сообщение от BANO

это может быть из-за пути

Уже часов 5 играюсь, никак.

@BANO · 12.04.2016, 23:25

Максим_М21, ладно
скиньте скрин дерева файловой системы

@Максим_М21 · 13.04.2016, 08:33 **[ТС]**

Сообщение от BANO

скрин дерева файловой системы

Я перешел на BrowserSync. Ниже скрины.
Jade - работает с подключаемыми файлами, а sass только когда пишу код в одном файле (при подключении файла, выдает "ненайдено").

@Максим_М21 · 13.04.2016, 15:01 **[ТС]**

Нашел!!! Я тестил на рабочем столе, где в путях стоит кириллица. В этом и причина. Спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	12.04.2016, 21:39 [ТС]
	Спасибо, помогли. Теперь выскочила следующая проблема. При компиляции Сасс, все работает хорошо, до тех пор пока я не подключаю другой файл (@import '_body.scss'. В консоли выдает, что файл не найдет. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	12.04.2016, 22:27
	Максим_М21, это может быть из-за пути вы поиграйтесь например @import '../_body.scss' 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	12.04.2016, 23:25
	Максим_М21, ладно скиньте скрин дерева файловой системы 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	13.04.2016, 15:01 [ТС]
	Нашел!!! Я тестил на рабочем столе, где в путях стоит кириллица. В этом и причина. Спасибо за помощь. 0

Компиляция jade

Решение