И так: NODE.JS - УСТАНОВЛЕН!

 

   Теперь переходим к установке Gulp  

 

 

В пути к папке проекта - НЕ ДОЛЖНО БЫТЬ РУССКОЯЗЫЧНЫХ ПАПОК!

 

 

 

 

Откроем терминал
в папке нашего рабочего проекта:

 

 

Далее пишим команду:

 

 

 

это означает:

 

 

Идет установка Gulp:

 

 

 

А для пользователей MAC прийдется выполнить команду с правами СУПЕР-ПОЛЬЗОВАТЕЛЯ:

 

 

 

И ТАК, УСТАНОВКА  Gulp  на MAC:

 

Ввести ниже указанную команду:    sudo npm i gulp -g

 

 

Возможно придется поставить курсор в ключик)

 

 

И с 1-раза может не получиться, но со 2-й попытки, териминал "принял" админский пароль:

 

 

 

Установка   Gulp  на    MAC - ЗАВЕРШЕНА!  

 

 

 

   Далее выполним инициализацию Gulp  

 

 

Набираем ( уже БЕЗ пароля и без  sudo  )

 

myproject>  npm init

 

 

И далее, нам нужно ответить на некоторые вопросы связанные с проектом.

 

Далее, собственно установим  Gulp

 

Но бывает случается такой момент когда появляется такое сообщение - тогда делаем следующее:

ПОЛУЧИЛИ СООБЩЕНИЕ (Сразу с подсказской)

 

Копируем эту подсказку и вставляем как команду: (указав свой логин учетной записи от MAC)

 

 

 

 

 

Пошла установка  Gulp

 

 

   Установка ЗАВЕРШЕНА!  

 

 

И чтобы открывать Terminal - из любой папки делаем следующие настройки:

 

 

 

И таким образом уже открываем Terminal:

 

 

 

 

 

Можно пройти в папку и посмотреть как выглядит  Gulp

 

 

 

А здесь рассмотрим, как быстро создавать текстовые файлы в паке на MAC.

 

Качаем программку  iMakerTxtFile

 

Например здесь:
https://sageleo.com/wp-content/uploads/2017/05/iMakerTxtFile.zip

 

Распаковываем в папке и далее один ньюанс:

 

Для того чтобы перенести Значек программы ( иконку ) на панель папки - необходимо  Разрешить  использование сторонней программы  в настройках  самого MAC:

 

 

Разрешим  нужную программу:

 

 

И затем, перетащим иконку программы на панель папки удерживая   (Comand)     Cmd 

 

 

 

 

Теперь для создания текстового файла - кликнуть на иконке (на панели папки) и получим окно создания файла:

 

 

 

 

   Готово! Работает! Файлы создаются!   

 

 

Далее возвращаемся к инструкции для Windows.

 

 

 

 

Создадим файл  gulpfile.js

 

 

в папке  myproject

 

И наберем в нем код:

 

 

var gulp = require('gulp');
gulp.task('mytask', function() {
console.log('Сообщение ура!')
} );

 

 

Затем перейдем в  Terminal 

 

и выполним наш таск:   mytast 

 

 

 

 

 

НЕ ЗАБЫВАЕМ УСТАНОВИТЬ   Gulp sass  в  Terminal  MAC.

Командой:   npm i gulp-sass --save-dev

 

 

    УСТАНОВИЛИ SASS!   

 

 

Не забываем также установить  SASS  для  Sublime Text

 

 

 

 

 

     УСТАНОВИЛИ SASS  для Sublime Text!   

 

 

Проверим  работу сниппета для   Sass  в Sublime Text:  - Проверили Работает!

 

 

 

 

Ссылка на Windows версию

 

sass-css-part-3
sass-css-part-3

 

 

 

    Инициализация Gulp   

 

Для того что бы начать проект - нам нужно его инициализировать:

 

 

Эта команда позволяет инициализировать и создать базовый стартовый файл манифеста для нашего проекта.

 

 

Далее нужно ответить на несколько вопросов:

 

 

Получим сообщение:

 

извините, имя больше не может содержать заглавные буквы

 

Поэтому укажем имя только низкими буквами:

 

Далее:

 

 

 

Далее просто:

 

 

Тоже просто:

 

У нас нет Репозитория - поэтому тоже:

 

 

Тоже просто:

 

Автора можем указать:

 

И жмем:

 

 

Оставляем и :

 

Далее если все правельно - пишим "YES"

 

 

 

и жмем :

 

И должен появиться файлик:

 

     package.json  

 

 

Давайте его откроем:

 

 

 

 

Дальше идем)

 

Файл package.json - является манифестом проекта.

 

Кроме того он хранит информацию об используемых пакетах в нашем проекте.

 

Например если устанавливать Gulp c другим пакетом -

 

gulp save dev - то эта версия, автоматически добавиться в наш файлик package.json

 

- Это позволяет быстро разворачивать проект, с учетом уже имеющегося package.json

 

и устанавливать необходимые модули с зависимостями, которые прописываются в package.json новых проектов.

 

 

Далее установим наш проект Gulp!
Терминал - не закрывали - в нем и продолжаем:

 

 

 

- т.е. - установка с ключом --save-dev который позволяет сохранять пакет в package.json

 

 

Идет установка:

 

Затем смотрим файл package.json

 

 

У нас появился параметр:

 

 

и также:

 

версии:

 

 

 

- значит можно устанавливать версию - выше этой - Если выйдут новые версии.

 

И у нас появилась папочка  node_modules   в которой лежит пакет gulp и необходимые зависимости:

 

 

В эту папку будут автоматически сваливаться все модули и зависимости.

 

 

 

 

У всех проектов, есть ОБЩАЯ СТРУКТУРА КАТАЛОГОВ

 

Например, большинство проектов, имеет папку:

 

dist

app

 

 

Давайте создадим первоначальную структуру нашего проекта.

по правилам хорошего тона web-разработки.

 

В результате мы должны создать структуру:

Создадим папочку
app

 


и затем
папку dist - которая будет содержать готовый продукт, после сборки. Оптимизированный, сжатый и причесанный. Т.е. папочка продакшена.

 

 

Работаем в папке app - папка исходников нашего проекта.

 

Создаем пустые папки и еще пустой файл  index.html

 

 

Перейдем на уровень выше, и договоримся, что:
папка myproject - будет корневой папкой проекта.

 

 

 

Далее, на нужно создать gulp-файл: gulpfile.js - в корне нашего проекта myproject создаем:

 

 

 

 

Давайте откроем его gulpfile.js

 

 

И пишем в нем:

 

 

var gulp = require('gulp');

 

require - это подключение.

 

Дальше можем работать с этой переменной и создавать task - таски (инструкции).

 

Например, создадим тестовый task

 

Причем, все таски начинаются с gulp.

 

 

и через запятую - что он task - таски будет делать. Т.е. - функцию, которую он будет выполнять.

 

Например: фразу Привет - Я task!

 

console.log(); - это стандартная функция JavaScript, которая выводит что-то в консоль.

 

 

Сохранимся! и проверим работу нашего таска из консоли

 

 

Исходный код:

 

 

SASS - CSS препроцессор (Часть 3-я)

 

 

THE END PART 2♦