Была поставлена задача взять 188 строк кода из Gulp task runner и разделить его на модули. — Что? — спросил я. Я не против прокрутки. Без каких-либо предварительных знаний по предмету и только базового понимания Node.js я неохотно принял вызов.
В прошлую субботу и воскресенье я провел все свободные часы за кофе в поисках документации для начинающих. Незнание соответствующих условий поиска усложняло задачу.
В понедельник, вторник и среду я рылся в дальних концах интернета, но постоянно натыкался на одни и те же статьи — еще раз перечитывал запутанный технический жаргон и безуспешно — кроме одной статьи из Вигета. Я посещал и читал эту двухлетнюю статью полдюжины раз, прежде чем решил попробовать код на Github. Я отдаю должное Дэну за то, что он помог мне сделать гигантский скачок вперед. Тем не менее, в основном это были удача и догадки, которые заставили его работать.
Сегодня, через шесть дней после начала этого проекта, я думаю, у меня есть кое-что, чем можно поделиться. Давайте начнем!
строительные леса
|- node_modules/
|- package.json
|- README.md
|- v1/
|- build/
|- images/
|- index.html
|- scripts/
|- styles/
|- cache/
|- gulpfile.js
|- images/
|- index.html
|- sass/
|- scripts/
|- tasks/
Примечание. В настоящее время у нас нет доступа к репозиторию git. Версии старой школы здесь являются нормой — скопируйте папку, переименуйте ее в v2.
./gulpfile.js
После модуляризации gulpfile.js сократился со 188 строк до 24. Для размещения модулей было создано еще семь файлов.
18: require-dir — помощник для запроса каталога ./tasks/.
19: кажется, что переменные работают по-разному в приложении Node.js. Прочтите статью Хаге Яапа Глобальные переменные в Node.js.
22: будет просмотрен каждый файл в папке ./tasks/.
Важно!Очищайте эту папку от ненужных файлов — добавляйте случайный файл, включающий throw (ошибка); приложение резко остановится.
24: введите «gulp» в командной строке, и эта задача будет запущена.
./задачи/config.js
Все модули в ./tasks/ ссылаются на config.js с помощью var config = require(‘./config’).
Поскольку я новичок в Node.js, я задавался вопросом, запускался ли config.js более одного раза. После добавления console.log('лучше не запускать больше одного раза!')в config.js я обнаружил, что он запускался только один раз. Фу! Кроме того, это первый элемент, который нужно запустить.
Файл config.js предназначен для обмена настройками между задачами. Я предполагаю, что файл может быть не нужен, но мне нравится его использовать, потому что он похож на указатель в книге. Я предполагаю, что значения объекта являются главами. Хммм, что происходит в sass? Позвольте мне открыть ./tasks/sass.js, чтобы узнать! Ааа, он использует «gulp-autoprefixer. Молодец!»
Примечание. Я выбрал объектный литерал, а не JSON, потому что этот формат легче просматривать. Разрывы строк в файле JSON были невозможны.
кеш.js
Пожалуйста, прочитайте мою предыдущую статью, особенно раздел о щенках, чтобы лучше понять этот блок кода.
3. Для этого потребуется файл config.js. Как он узнает, что это файл .js, мне неизвестно. Раньше этот файл назывался config.json, и он все еще находил его.
4. Простое напоминание: убедитесь, что настройки этого файла добавлены в config.js.
15. Выдавать ошибку, если в папке ./cache/ нет файлов.
39. Проверьте, доступно ли подключение к локальному серверу.
42. Если подключение существует, заполните папку ./cache/ HTML-кодом из файлов.
44. Если все в порядке, получите файл, его содержимое и сохраните их в папку ./cache/.
51. Если появляется ошибка, запустите checkCache(), чтобы проверить, находятся ли файлы уже в папке ./cache/.
58. Примечание: статья Хаге Яапы о Глобальных переменных в Node.js оказалась очень полезной.
66: создайте папку ./cache/.
72. Прокрутите devFiles в config.js.
74. вернуть функцию в последнем цикле, чтобы она не стала асинхронной.
Антракт
Делая передышку, я столкнулся с Почему я оставил Gulp and Grunt для npm-скриптов от @housecor. Я только начал. Дай мне перерыв! (-:
файлinclude.js и index.html
По большей части этот модуль использует gulp-file-include. setInterval предназначен для управления ошибкой: getaddrinfo ENOTFOUND, о которой вы можете прочитать в предыдущей записи дневника.
javascript.js
Здесь не о чем говорить.
sass.js
По просьбе добавили gulp-sass. Я не использовал Sass с тех пор, как начал работать в этой компании — почти три года назад. Рад, что он вернулся.
7. gulp-autoprefixer — новое дополнение. Настройки находятся в файле config.js.
9. Для поддержки Sass добавлены gulp-sourcemaps.
Примечание. Чтобы DevTools автоматически перезагружали стили при изменении исходного файла, препроцессор должен быть настроен на повторное создание файлов CSS при каждом изменении исходного файла.
изображения.js
На прошлой неделе я забыл включить изображения. Упс.
7. gulp-newer и gulp.watch используются для мониторинга папки изображений. Если изображение обновляется, оно помещается в папку ./build/images/.
Проблему решать на следующей неделе: новые изображения не просматриваются.
браузерsync.js
Этот файл запускает Browsersync.
7. Я попытался использовать предложение Хаге Яапы по поводу экспорта, но не смог и в итоге сделал его глобальной переменной.
24. Другие задачи указаны в скобках. Gulp гарантирует, что они будут завершены до синхронизации браузера.
Вот и все!
Резюме
- Сто восемьдесят восемь строк кода — это немного. На его модульную обработку ушло шесть дней.
- Мое самое большое приложение — 6540 строк кода. На этом этапе его модульная обработка может занять более месяца. Ой!
- Мне нравится работать с папкой ./tasks/, потому что каждый модуль небольшой.
- Модульность небольшого приложения Node.js не так сложна, как кажется, но добавляет дополнительный уровень сложности поверх приложения — здесь существует большой разрыв между уровнями навыков.
Придется выезжать на выходные. Настройтесь на следующей неделе!
Заметки на понедельник
- Загляните в gulp-clean.
- Узнайте, почему gulp.watch(config.images.src, [‘images’]) не работает.
- Проверьте удалить операторы консоли и отладчика.
Отказ от ответственности. Дневник разработчиков пишется каждый день, и предыдущие статьи не обновляются. Код может работать сегодня, но завтра будут найдены глюки. Проявите должную осмотрительность и тщательно протестируйте любой написанный здесь код, прежде чем внедрять его в свой собственный проект. Удачи!
