Что нужно, чтобы отслеживать изменение html в gulp?

Question

[vasIvas]

Хочу установить наблюдение за index.html в gulp и по изменению пересоздавать файл в другой директории.
Вот код задания -

gulp.task('index-html', function(){
	console.log('html-------------------------------------------------------')
	gulp.src('compile/src/index.html')
	.pipe($.rename('index.html'))
	.pipe(gulp.dest('src/lib'))
});

Вот код наблюдения -

gulp.task('watch', function(){
	gulp.watch('./compile/src/main.coffee', ['coffee']);
	gulp.watch('./compiled/src/main.js', ['uglify']);
	gulp.watch('./compile/src/index-html', ['index-html'])
});

Но в итоге изменение применяются только при старте, при сохранении ничего не происходит, почему?
Может для html нужен какой-то дополнительный плагин?

Comments

[Kate Yu]

Скажите пожалуйста, вы нашли решение проблемы?

[vasIvas]

Да. У меня ошибка
gulp.watch('./compile/src/index-html', ['index-html'])
а должно быть
gulp.watch('./compile/src/index.html', ['index-html'])

Answer 1

[Сергей Протько]

опечатки в путях? Как минимум две опечатки вижу.

Comments

[vasIvas]

Только одна - './compile/src/index-html', должно быть - index.html

[Сергей Протько]

@vasIvas а тут ок? Просто это странно что директория отличается.
compiled/src/main.js

[vasIvas]

@Fesor: это нормально, это разные директории ДО и ПОСЛЕ компиляции...

[Сергей Протько]

@vasIvas я бы порекомендовал все же делать директорию содержащую исходники с более понятным названием, например src, source....

[vasIvas]

У меня compile/src/ , compiled/src/ и просто ./src/ для продакшн. Так нормально?

[Сергей Протько]

@vasIvas эм.... нет) Но если вам так удобно, то оукей.

[vasIvas]

@Fesor: тогда говорите, как нужно! Я хочу учится делать сразу правильно, а не придумывать что-то. Подробно объясните мне, как должен выглядеть проект, в котором используется первичная компиляцию coffee и ему подобных, вторичная сбор подготовка картинок слияние файлов. И уже после всего этого получается готовый проект. ?)

[Сергей Протько]

src/
- assets - шрифты, картиинки и прочая чушь которая просто копируется
- styles - less/sass стили
- scripts - coffee исходники (или просто js)
vendor - зависимости установленные через bower
tests - тесты
dist/ - дев сборка.
compiled/ - собранная версия под продакшен

Последнее две можно объеденить в одну и просто добавить source maps что бы можно было дебажить минифицированный JS и не сойти с ума.

Этот пример не стоит брать в чистом виде. Побродите по гитхабу, посмотрите как еще люди делают.

[vasIvas]

Спасибо! А мне кажется, что его можно и в чистом виде брать. Я уже немало пролазил githab и там практически везде, как и у Вас. Мне только хочется уточнить по директории vendor... Что это? Это папка bower_components или нечто другое? Просто я второй или уже третий день и учу и заодно настраиваю gulp для сборки и компиляции и все вроде просто, уже вроде почти закончил и можно приступать к встраиванию в yo. Но у меня большое непонимание с bower и index.html. Как мне сказали, в релизной версии index.html должны быть подключены только по одному файлу от каждого расширения ( один main.js слитый из всех самописных и библиотечных файлов и так же с css ), но в девелоп, подключенные файлы могут меняться от проекта к проекту и я не совсем понимаю, как настроить bower для автоматического подключения библиотек в index.html? Девелоперской версии.
Так что, если Вам не сложно, прокомментируйте вопросы о vendor и bower.

[Сергей Протько]

ну bower это просто менеджер зависимостей. Это удобнее чем вручную качать определенную версию пакетов и все зависимости оной. Скажем если вы захотите применить twitter bootstrap, вам надо просто в консоли написать bower install --save bootstrap и оно поставит последнюю стабильную версию + jquery (так как оно указано в зависимостях bootstrap).

По поводу того что должно быть в index.html - это решать только вам. Можно просто собирать вендорные скрипты отдельным таском в gulp, просто собрать все js в один жирный vendors.js. А можно часть подменить на ссылки в CDN с фэлбэком локальным.

Стили допустим я сразу подключаю в less через import и на выходе имею один css файл для проекта. Можоно так же свои сборки того же бутстрапа быстро делать.

Вообще вопрос с index.html не так прост. Есть штуки типа gulp-bower-files или что-то в этом духе, которые сами смотрят что там в информации о пакетах сказано, какие файлы нужны для работы и т.д. То есть там обычно указывается тот самый main.js который нужно подключать.

Еще есть usemin, но мне лично не нравится такой подход.

[vasIvas]

>Есть штуки типа gulp-bower-files
А я как раз только сегодня о нем спросил и к сожалению, так и не получил ни одного ответа. Может Вы что-то подскажете main-bower-files

[vasIvas]

gulp-bower-files больше не работает.

Answer 2

[Родион Мещеряков]

Все вроде бы ок, если не считать уже упомянутых опечаток :) Может быть, в них все дело?

Если интересно, можете глянуть мой gulpfile. Недавно как раз пересобрал.

Comments

[vasIvas]

@rodionme, Спасибо за пример! У меня почти так же получается, но пока не так опрятно :)
А Вы не подскажете, для чего нужен массив files в задаче server? Это типа указывает, что эти директории-файлы хранятся на сервере?

[Сергей Протько]

Просто что бы задавать списк путей более опрятным способом.

[vasIvas]

@Fesor, Спасибо!

[vasIvas]

У Вас в примере файла, в таске compass, есть строка comments:true. Почему, когда я себе её ставлю, компиляция не работает?

[Родион Мещеряков]

Не знаю, возможно связано с различиями в версиях каких-то пакетов. Вообще, часть этих настроек (для компаса) хранились в отдельном файле config.rb, но я решил от него избавиться. :) Подключение config.rb выглядит так:

var compass = require('gulp-compass');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
  .pipe(compass({
    config_file: './config.rb',
    css: 'stylesheets',
    sass: 'sass'
  }))
  .pipe(gulp.dest('app/assets/temp'));
});

Отсюда

Сам файл config.rb выглядел у меня Вот так

[vasIvas]

Как выглядит у Вас конфиг я знаю! У меня два дня Ваш репозиторий открыт))) Я сейчас ( со вчерашнего дня ) разбираюсь с jade и часто к Вам подсматривал. Но я решил использовать browserify, который все расхваливают, но у него есть маленькая проблемка с gulp... Gulp-browserify бажит от jade и сегодня я только это понял и начал переписывать на чистый browserify. Но с ним у меня тоже все не гладко... Вы знакомы с browserify?)
Спасибо Вам за ссылку на рипозиторий, он мне очень помог!

[Родион Мещеряков]

Browserify не использовал, т.к. пока не увидел в нем смысла для своих проектов. Я так понимаю, что это нечто вроде RequireJS?

У меня весь JS собирается в 2 файла: сторонний код (plugins.js) и собственный код (main.js). При выкладке в продакшн код минимизируется. Не уверен, что подход RequireJS с тучей запросов к серверу будет оправдан. Но это уже тема другого вопроса. :)

Странно, что Browserify влияет на Jade...

[vasIvas]

Спасибо Вам! Да, это разговор уже немного другой. И я сейчас создам в этом разделе тему о jade + js библиотеки и кину сюда ссылку, может и Вы чего ответите))

[vasIvas]

Создал :) Насколько уместна связка Jade + Browserify в frontend разработке?

Answer 3

[vasIvas]

Задал вопрос и сразу увидел ошибку.. Говорить не буду где она, проверите свою наблюдательность:)

Answer 4

[GitJedi]

Добрый день. В свой таск 'watch' допишите:
gulp.watch("app/*.html").on('change', browserSync.reload);
//Ответ нашел на https://browsersync.io/docs/gulp