КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Пакет filesystem

Здравствуйте. Хорошей практикой является использование css-препроцессоров sass или less, cжатие файлов перед выпуском в продакшн, а также приведение изображений к нужным размерам и сжатие их для снижения нагрузки на сервер. Для этих целей лучше всего использовать node-модуль gulp сотоварищи.

Установка node-модулей

После установки Node.js откройте консоль и перейдите в папку с проектом и выполните следующие команды
cd c:/openserver/domains/filesystem
npm install
npm install загрузит из хранилища npm перечисленные в package.json модули. Главным является gulp. Gulp - это инструмент, который помогает автоматизировать рутинные задачи веб-разработки. Для работы с gulp требуются дополнительные gulp-модули для решения требуемых задач:

  • browser-sync - создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта
  • gulp-sass и gulp-less - создание css-файлов из sass или less, добавление префиксов для браузеров с помощью gulp-autoprefixer и less-plugin-autoprefix
  • gulp-concat - конкатенация файлов
  • gulp-uglifyjs - сжатие js-файлов
  • gulp-cssnano - пакет для минификации CSS
  • gulp-rename - библиотека для переименования файлов
  • gulp-imagemin - модуль для сжатия изображений
Для создания новых или изменения существующих gulp-тасков (команд) используется файл gulpfile.js.

Запуск тасков

Переходим в папку с нашим сайтом (в корне которого лежит gulpfile.js) и в консоли вбиваем команду
gulp <имя таска>

Самый важный и полезный таск watch, который перед своим запуском выполняет таски browser-sync и less, и следит за всеми html, js, less, css и php файлами, выполняя автоматическую перезагрузку страницы в случае их изменения.

Для указания src-папок в тасках используются упрощённые glob-шаблоны, которые поддерживают также перечисление нужных файлов в виде массива:

gulp.task('scripts', function() {
  return gulp.src(['gulp/js/script.js', 'gulp/js/script2.js']) // Берем все необходимые библиотеки
    .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
    .pipe(uglify()) // Сжимаем JS файл
    .pipe(gulp.dest('gulp/jsmin')); // Выгружаем в папку app/jsmin
});

Вы можете легко встроить этот модуль в свой проект, всё что вам нужно будет сделать, это изменить в тасках src и dest папки, а также указать имя домена в таске browser-sync.

Теперь о PHP-функциях

Недавно пришлось делать переименование 100500 html-файлов на php-файлы, а когда-то давным-давно для смайлов в чате нужно было изменить размер каждой картинки и переименовать их в 1.gif, 2.gif и т.д... В change.php написан класс из этих трёх методов, смотрите, разберётесь.

Заключение

Приятного пользования

2016.08.20 115
jpg

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


  • Сделай ещё чтоб меняло табы на два пробела, а то как откроешь давние файлы, то просто ужыс..

  • 2017.05.16 - 22:43

  • sash ответил Vova

    Vova, давно уже сделано.. По тем же граблям наступав

  • 2017.05.16 - 22:47

Яндекс.Метрика Яндекс.Метрика