Как собственно обновлять страницы при сохранении   html   и  js 

 

Поэтому: Давайте для начала создадим

 

в папке  \js    файл:     common.js 

в нем будем писать   пользовательские функции.

 

 

 

 

 

Кроме того - нам нужно обновлять при сохранении   индексы  html 

 

 

ПЕРЕГРУЗИТЬ Сервер - каждый раз после изменений!

 

Ctrl + C 

 

 

 

 

Давайте рассмотрим как можно оптимизировать JS-файлы библиотек, а не   common.js 

 

- поскольку он рукотворный и не такой большой.

 

Все библиотеки, такие как:

 

  JQuery       Magnific Popup        Carousel  и

 

другие  плагины - они нуждаются в сжатии - поскольку они   довольно  большие  .

 

 

Давайте в папке   /app    создадим папку     /libs 

 

куда - будем сваливать все сторонние библиотеки:

 

JQuery Magnific Popup Carousel   и другие ...

 

Для установки новых библиотек - будем использовать

 

BOWER Install

 

 

Установка - простая!

 

Установим его - что бы у нас появился

 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

 

Filezilla for MAC Download

 

 

Однако!  Даже если мы создадим файлик     .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