Snakeskin

[Safort]

kobezzza,
у меня тут небольшая проблема, не подскажешь, что за магия творится?)
Решил я использовать уже компилированные SS-файлы в Ноде(вместо живой компиляции).
Итак, действующие лица:
gulpfile.js
/app/views/index.ss
/app/views/index.ss.js
app.js


Сожержимое gulpfile.js:

//...
    gulp.task('views', function() {
      gulp.src([ 'путь_к_исходнику/' + 'index.ss'])
          .pipe(concat('index.ss'))  //на будущее, когда будет много файлов
          .pipe(gulp.dest('app/views'))
          .pipe(snakeskin({ prettyPrint: true }))
          .pipe(gulp.dest('app/views'));
    });
    // ...

Содержимое index.ss (упростил для примера):

{template text(a)}
      {a}
    {end}

Сожержимое app.js:

var tpls = require(__dirname+'/app/views/index.ss.js').init(require('snakeskin'));
console.log(tpls.text('ss.js'));

Запускаю скрипт, а консоль меня посылает

C:\dev\test>node app.js

C:\dev\test\app\views\index.ss.js:7
    var $C = this.$C != null ? this.$C : Snakeskin.Vars.$C,
                                         ^
ReferenceError: Snakeskin is not defined
    at Object.<anonymous> (C:\dev\test\app\views\index.ss.js:7:42
)
    at Object.<anonymous> (C:\dev\test\app\views\index.ss.js:164:
4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\dev\test\app.js:18:12)
    at Module._compile (module.js:456:26)

Но это ещё не всё. В app.js пишу следующее:

var snakeskin = require('snakeskin');
    var tpls = snakeskin.compileFile(__dirname+'/app/views/index.ss');
    console.log(tpls.text('ss'));

Запускаю файл - работает. Но и это ещё не всё, снова пишу:

var tpls = require(__dirname+'/app/views/index.ss.js').init(require('snakeskin'));
    console.log(tpls.text('ss.js'));

Запускаю. И это теперь тоже работает.

Казалось бы, коммунизм наступил всё норм, но нет.
Редачу файл index.ss (или просто жму Ctrl+S в Sublime), Gulp подхватывает изменения, запускаю app.js и снова вылетает ошибка.
И такой баг(?) повторяется только при использовании уже компилированного шаблона, при живой компиляции такой проблемы нет.

Не знаю в чём именно проблема, но раз ошибку выдаёт SS, то решил написать сюда.

[kobezzza]

snakeskin({ prettyPrint: true })

Ты не указал тип экспорта для ноды.

snakeskin({ prettyPrint: true, exports: 'commonJS' })

А не работает, потому что компиляция делается с глобальным экспортом, а ты запускаешь в ноде.

(До версии 6 это делалось с помощью флага .commonJS)

concat('index.ss')

Лучше так не делать, т.к. в SS предусмотрена директива include и при сборке файлов она организует модули, гарантирует инкапсуляцию глобальных переменных, настроек компиляции и т.д.

https://github.com/kobezzza/Snakeskin/wiki/include

var snakeskin = require('snakeskin');
    var tpls = snakeskin.compileFile(__dirname+'/app/views/index.ss');
    console.log(tpls.text('ss'));

Всё норм, compileFile сейвит полученный шаблон (с экспортом для ноды) на жёсткий диск, а когда ты Галпом перезаписываешь файл с экспортом без ноды, то он перестаёт работать, т.е. просто задай правильный экспорт и будет всё хорошо


PS: кстати, в SS CLI API есть свой вотчер, но в отличии от того же галпа, он работает с графом отношений файлов, т.е. если обновить, например, файл локализации, который подключён в шаблон, то он перекомпилит его.

https://github.com/kobezzza/Snakeski...0%BE%D0%B5-API

Скомпилить все шаблоны в папке и сохранить в другую папку результат, задать вотчер.

snakeskin ./myTpls/ -o './compile/%file%.js' --watch

[kobezzza]

snakeskin.compileFile(__dirname+'/app/views/index.ss');

На будущее: лучше юзай path.join для конкатенации урлов, это не относится к SS, а вообще, т.к. можно наткнуться на всякие баги.

[Safort]

kobezzza,

Ты не указал тип экспорта для ноды.

snakeskin({ prettyPrint: true, exports: 'commonJS' })

О! Спасибо) Эта шняга решила проблему)

PS: кстати, в SS CLI API есть свой вотчер

Попробовал. Теперь у меня в папке проекта папка с именем '. и я не могу её удалить =__=

На будущее: лучше юзай path.join для конкатенации урлов, это не относится к SS, а вообще, т.к. можно наткнуться на всякие баги.

Спасибо за совет)

[Safort]

kobezzza,
у меня проблема за проблемой

Разбросал файлы так:

Галп

//...
gulp.task('views', function() {
  gulp.src([path.join(paths.src.views, 'index.ss')])
      .pipe(snakeskin({ prettyPrint: true, exports: 'commonJS' }))
      .pipe(gulp.dest('app/views'));
});
//...

index.ss

{include 'main.ss'}
{include 'article.ss'}

main.ss

{template main.home(articles)}
<!DOCTYPE html>
<html>
  ///всякий html...

   {block content}
     {forEach articles => article}

      ///всякий html...
     
     {/forEach}
   {/block}
 </section>
 
  ///всякий html...
</html>
{end}

article.ss

{template article(data) extends main.home}
  <!DOCTYPE html>
  <html>
    ///всякий html

    {block content}
      ///всякий html
    {/block}

    ///всякий html
  </html>
{end}

Вотчер галпа следит за изменениями всех *.ss и вызывает SS при оных.
Проблема: изменяю шаблон > сохраняю его > перезапускаю app.js но изменений на странице не видно(так же как и ошибок).
Перезапускаю сам Галп, потом app.js и только тогда изменения видны.
SS по какой-то причине не подхватывает изменения в подключаемых шаблонах. Скорее всего я не так их подключил.

[kobezzza]

Не совсем понятно, если я правильно тебя понял, то ситуация такая: есть файл А в него включается файл Б, и при обновлении файла Б ничего не происходит. Если это так, то это вина галпа, т.к. он не знает про граф отношений и тут нужен --watch SS, т.к. он обновляет файлы в таком случае.

ЗЫ: если можешь, то запиши видео с работой, чтобы было проще понять.

[Safort]

kobezzza,

Не совсем понятно, если я правильно тебя понял, то ситуация такая: есть файл А в него включается файл Б, и при обновлении файла Б ничего не происходит.

Да, всё правильно. Есть файл index.ss, который инклудит в себя main.ss и article.ss.

Если это так, то это вина галпа, т.к. он не знает про граф отношений и тут нужен --watch SS, т.к. он обновляет файлы в таком случае.

Так ведь Галпу не нужно знать какие файлы куда включаются, он мониторит изменения всех нужных *.ss-файлов, запускает

gulp.task('views', function() {
  gulp.src([path.join(paths.src.views, 'index.ss')])
      .pipe(snakeskin({ prettyPrint: true, exports: 'commonJS' }))
      .pipe(gulp.dest('app/views'));
});

который отдаёт index.ss СнэйкСкину, и СС уже смотрит на содержимое и подключает указанные инклуды. По моей логике так должно быть. Или я ошибаюсь?

ЗЫ: если можешь, то запиши видео с работой, чтобы было проще понять.

Если сегодня к вечеру не удастся решить проблему, то запишу)

[kobezzza]

Кажется понял в чём дело, задай параметр

{ prettyPrint: true, exports: 'commonJS', cache: false }

Если поможет, то я потом обновлю плагины: сделаю этот параметр по умолчанию отключённым.

[Safort]

kobezzza,
да, это оно. Спасибо ещё раз, теперь проблем нет)

[kobezzza]

Выпустил патчи для плагинов Grunt и Gulp.

***

По поводу ошибки с

Попробовал. Теперь у меня в папке проекта папка с именем '. и я не могу её удалить =__=

Скорее всего ты пользовался командной оболочкой Windows, а там для обозначения строк нужно писать "", а я привёл пример в Bash, от сюда и проблема

snakeskin ./myTpls/ -o "./compile/%file%.js" --watch

Что касается URL, то можно юзать любую нотацию, т.к. в CLI она приводится к единому виду.