Как собственно обновлять страницы при сохранении html
и js
Поэтому: Давайте для начала создадим
в папке \js файл: common.js
в нем будем писать пользовательские функции.
Кроме того - нам нужно обновлять при сохранении индексы html
ПЕРЕГРУЗИТЬ Сервер - каждый раз после изменений!
Ctrl + C
Давайте рассмотрим как можно оптимизировать JS-файлы библиотек, а не common.js
- поскольку он рукотворный и не такой большой.
Все библиотеки, такие как:
JQuery
Magnific Popup
Carousel
и
другие плагины - они нуждаются в сжатии - поскольку они довольно большие .
Давайте в папке /app
создадим папку /libs
куда - будем сваливать все сторонние библиотеки:
JQuery
Magnific Popup
Carousel
и другие ...
Для установки новых библиотек - будем использовать
Установка - простая!
Установим его - что бы у нас появился
Comand line interface
Что бы можно было запускать Bower
- из командной строки.
Идем в Консоль (Terminal)
Пишим User Expiriences) npm i -g bower
Все - Bower - установлен!
Однако - для работы Bower
- нужен git
Git Install
Скачали дистрибутив для Windows :
И устанавливаем: все там по дефолту выбираем
Git - Установлен!
Далее запустим (Terminal) - причем глобально -
не из папки myproject
Далее командами зададим user name
и user e-mail
Порядок установки GIT
смотреть тут:
Ветвление и слияние
Функция Git, которая действительно отличает ее от почти всех других SCM, есть ее модель ветвления.
Git позволяет и предлагает вам иметь несколько локальных ветвей, которые могут быть полностью независимы друг от друга. Создание, слияние и удаление тех линий разработки занимает несколько секунд.
Это означает, что вы можете делать такие вещи, как:
Трансформация без трения. Создайте ветку, чтобы попробовать идею, совершите несколько раз, вернитесь туда, где вы разветвляетесь, примените патч, вернитесь туда, где вы экспериментируете, и объедините его.
Ролевые кодовые линии. Имейте ветку, которая всегда содержит только то, что идет на производство, другое, что вы объединяете в работу, и несколько меньших для повседневной работы.
Функциональный рабочий процесс. Создайте новые ветви для каждой новой функции, над которой вы работаете, чтобы вы могли легко переключаться между ними, а затем удалять каждую ветвь, когда эта функция объединяется в вашу основную линию.
Одноразовые эксперименты. Создайте ветку, чтобы экспериментировать, осознать, что она не сработает, и просто удалите ее - отказаться от работы - никто больше ее не увидит (даже если вы подтолкнули другие ветви тем временем).
Ролевые кодовые линии. Имейте ветку, которая всегда содержит только то, что идет на производство, другое, что вы объединяете в работу, и несколько меньших для повседневной работы.
Функциональный рабочий процесс. Создайте новые ветви для каждой новой функции, над которой вы работаете, чтобы вы могли легко переключаться между ними, а затем удалять каждую ветвь, когда эта функция объединяется в вашу основную линию.
Одноразовые эксперименты. Создайте ветку, чтобы экспериментировать, осознать, что она не сработает, и просто удалите ее - отказаться от работы - никто больше ее не увидит (даже если вы подтолкнули другие ветви тем временем).
Необходимо создать файл .bowerrc в папке /myproject
Но пока не получиться это сделать:
На MAC - такая же фигня:
Качаем FileZilla for MAC
Однако! Даже если мы создадим файлик .bowerrc
Мы не сможем его увидеть(( 🙁 🙁 🙁
defaults write com.apple.finder AppleShowAllFiles YES
Перезагрузка FInder:
killall finder
Скрыть системные файлы на MAC :
defaults write com.apple.finder AppleShowAllFiles YES
Поэтому - пропишем прям в FileZilla куда будут устанавливаться пакеты и библиотеки:
ОБЯЗАТЕЛЬНО ПЕРЕЗАПУСТИТЬ Terminal
причем стартовать из /myproject
Порядок! Библиотеки там где нужно!
Нам понадобиться FileZilla (для создания файлов с нестандартным расширением)
Создаем файл в FileZilla
FileZilla - закрываем !
.bowerrc - открываем в Sublime Text3
В котором мы просто укажем КУДА - мы будем устанавливать библиотеки и пакеты
Теперь можно установить плагины,
перейдем в консоль ( terminal
)
и набираем bower i jquery magnific-popup
( набираем без save--dev - поскольку это уже библиотеки для front-end )
Лучше перегрузить Консоль
(и пошло у меня)
Все - БАУЭР (Bower) - все загрузил
- давайте посмотрим:
БИБЛИОТЕКИ СКАЧАЛИСЬ И УСТАНОВИЛИСЬ!
Создадим следующий таск - который будет:
Конкатенировать
все JS
- библиотеки в одну;
Сжимать
собранную библиотеку
и Выводить
все это в единый файл библиотеки.
Для этого нам нужно установить 2 пакета:
gulp-concat
- для конкатинации
gulp-uglifyjs
- для сжатия файлов
UX npm i gulp-concat gulp-uglifyjs --save-dev
--save-dev ключи нужны чтобы сохранить версии пакетов
Проверяем
УСТАНОВЛЕН!
После установки библиотек -
gulp-concat
gulp-uglifyjs
ПОДКЛЮЧАЕМ ИХ в gulpfile.js
Далее создадим ТАСК для сборки и сжатия ВСЕХ СКРИПТОВ!
Проверим работу таска scripts
Тоже самое пропишем для MAC:
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs');
gulp.task('sass', function() {
return gulp.src('app/sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('scripts', function(){
return gulp.src([
'app/libs/jquery/dist/jquery.min.js',
'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js'
])
.pipe(concat('libs.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
})
gulp.task('browser-sync', function(){
browserSync({
server: {
baseDir: 'app'
},
notify: false
});
});
gulp.task('watch', ['browser-sync', 'sass'], function(){
gulp.watch('app/sass/**/*.sass', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
Выполним наш таск scripts
Откроем index.html
и в самом низу подключим наши скрипты:
Пользуемся сниппетами - не тормозим!
Готово - подключили:
Проверим наш таск gulp watch
Сервер - у нас запустился!
Далее - откроем common.js
И что нибудь выполним на jquery
Теперь у нас обновляется (что??) при изменении в скриптах.
Было бы логично - запускать
scripts
до запуска сервера - что бы у нас все компилировалось - уже готовенькое и все работало.
Поэтому давайте перейдем к таску watch
В результате - у нас будет сразу происходить сжатие и конкатенация в режиме watch
(слежка).
Выключим пока сервер:
Дальше нам нужно так же подключить и css
Как Я обычно подключаю CSS - библиотеки
В папке /sass
- создадим libs.sass
в него у нас будут импортироваться все библиотеки:
Единственный CSS - который нам нужно подключить - это
magnific-popup.css
Но обратите внимание!
Заглянем в него обязательно!
Причем libs.css
-у нас остался не изменным - он НЕ СЖАЛСЯ!
Теперь поработаем над СЖАТИЕМ libs.css
Для этой задачи нам понадобиться инструменты:
gulp css nano
gulp rename
Идем в Terminal:
Теперь ПОДКЛЮЧИМ их в gulpfile.js
И тут же создадим соответствующий ТАСК - который будет сжимать все libs
Кроме того нужно добавить css.libs
в наш watch
Как у нас происходит поток: Сначала нужно sass
запустить
Затем - идем в index.html
Запуститься сервер:
И посмотрим исходный код в браузере:
Нажав на css/libs.min.css
- увидим:
Положим фото (картинки) в папку app/img/
Давайте подготовим все к ПРОДАКШЕНУ:
Библиотеки сваливать не будем - будем использовать компилированные библиотеки для front-end
Для ПРОДАКШЕНА - создадим отдельный таск: bild
в котором будут происходить чудеса)
Отроем gulpfile.js
Давайте подключим пакет del
- он позволояет подчистить лишние потроха проекта.
Выключаем сервер Ctlr + C
И после успешной установки - подключаем пакет del
в gulpfile.js
Далее создадим новый таск clean
- который будет чистить папку /dist
Разместим его до watch
Перейдем в Terminal
- и проверим как наш таск clean
удаляет папку dist