gulp_study

gulp_study

npm - nodejs packege manager
Основные команды:
npm ls -g   - покажет список пакетов установленных глобально. если ничего нет выведет empty
npm ls -g --depth=0   - покажет только те пакеты которые мы устанавливали сами (нулевой уровень вложенности)
npm ls --depth=0  - внутри папки проекта покажет какие пакеты установлены локально



1. Устанавливаю node.js
	https://nodejs.org/en/ беру стабильную
2. В папке проекта shift + правый клик.. окно команд
	вводим команду npm i gulp -g (пакетный менеджер, установить, галп, установить глобально.. можно установить в папку проекта, но сначала надо глобально)
!	В пути к папке проекта не должно быть русскоязычных папок! Многие пакеты gulp не понимают русскоязычных путей и будут проблемы в работе.

3. Инициализируем проект.
	npm init - создается базовый файл манифеста.
	вводим название проекта
	вводим версию
	описание...
	все желательно писать на англ.
	entry point:.. пропускаем
	test command:.. пропускаем
	git repository.. можно пропустить.
	keywords, autor.. указываем по желанию.
	Теперь должен появиться файл package.json (манифест)
	Здесь же будет информация какие пакеты используем..
	10мин..
4.Устанавливаем пакет - галп
	npm i gulp --save-dev  --save dev позволяет устанавливать пакеты в packeg.json
	найдем запись в packeg.json где будет указыватся версия пакета
	создана папка node_modules, в которой пакет gulp и необходимые зависимости
	gulp - остовной пакет, все остальные крутятся вокруг этого пакета - это зависимости которые нужны для правильной работы пакета gulp

5.Создаем структуру проекта.
	Структура каталога. По правилам хорошего тона создаем папки dist и app.
	app -> css, fonts, img, js, sass, index.html (все исходники)
	dist - готовый продукт после сборки (продакшт).. сжатый, откомпилированный.
	В корне папки проекта создаем документ gulpfile.js
	пишем в него var gulp = require('gulp') - подключение модуля кот. установили через npm i
	дальше можем работать с этой переменной и создавать таски - инструкции.
	gulp.task('my_task', function(){
		console.log('hello I am task');
	});
	вызов можно сделать из консоли, gulp my_task
	gulp.task('my_task', function(){
		return gulp.src('source-files');
	});
	.src - берет для обработки файлы
	.pipe - вызов команды, плагина.
	.pipe(plugin()); - выполняем плагин
	.pipe(gulp.dest('folder')); - куда выгружаем
	Задача галпа в принцпе:
	1. берем файл
	2. что-то делаем с ним..
	3. выводим куда-то результат.

6.Делаем препроцессинг sass
	Уснановим пакет sass.
	Любые gulp пакеты легко гуглятся.
	В консоли пишем: npm i gulp-sass --save-dev (с сохнанением пакета и версии в packeg.json)
	Дальше подключаем плагин sass в наш gulp файл
	В gulpfile.js после подключения самого галпа (var gulp = require('gulp')..)
	после запятой, дальше пишем:
	sass = require('gulp-sass'); // название пакета должно быть именно таким, каким мы его прописывали при установке пакета из командной строки.
	В папке app > sass создаем файл main.sass
	теперь можно в этом файле писать стили.
	Пишем таск sass^
	gulp.task('sass',function(){
		return gulp.src('app/sass/main.sass')// берем файл исходник (и сразу его возвращаем)
		.pipe(sass()) // выполняем команду нашего плагина
		.pipe(gulp.dest('app/css')) // выводим результат(указываем только папки!)
	});
	Тестовый вызов: в консоли gulp sass (выполняем gulp.task('sass'...))
	Результат: видим что стили появились в css/main.css

	Использование шаблонов:
	'app/sass/*.sass' - берем все файлы в данной директории с расширением sass
	'app/sass/**/*.sass' - в любом количестве вложенных директорий выбираем все sass файлы
	'!app/sass/main.sass' - данный файл исключится из выборки
	['!app/sass/main.sass','app/sass/main1.sass'] - исключаем из выборки несколько файлов
	'app/sass/*.+(scss|sass)' - выбираем scss и sass файлы в директории
	'app/sass/**/*.+(scss|sass)' - то же но и в поддерикториях

	Файлы, которые не обрабатываются, а являются подключаемой частью
	Напр. _part.sass - этот файл не будет обрабатываться (начинаются с подчеркивания)
	Такие файлы подключаем в основной:
	@import "part"  - можно опустить нижнее подчеркивание и расширение

7.Делаем наблюдение за изменениями!
	Используем метод галпа watch
	// подключаем метод слежения
	gulp.task('watch',function(){
	  gulp.watch('app/sass/*.sass',['sass']);// указываем за какими файлами следим
	  // через запятую указываем массив тасков которые будем выполнять если что-то изменится

	})
	остановить наблюдение можно ctrl+c

8. Делаем livereload
	Использование браузера sync
	изменения будут показаны на всех устройствах внутри одной сети!
	https://www.browsersync.io/
	Берем только строку команды: npm install -g browser-sync и устанавливаем в проект
	в консоли пишем: npm i browser-sync --save-dev
	После установки информацию о пакете увидим в package.json
	Подключаем пакет в gulpfile.js
	browserSync = require('browser-sync');
	Пишем таск:
	gulp.task('browser-sync',function(){
	  //browserSync({});//{здесь определяем параметры}
	  // 1-й параметр - сервер в нашем случае это папка app
	  browserSync({
	    server:{
	      baseDir:'app'
	    },
	    // убираем уведомления browser browser Sync
	    notify:false

	  });
	});
	Это все что надо для работы нашего сервера
	Теперь проследим за изменениями в файлах и будем автоматически инжектить
	измененный файл. Вся страница не перезагружается: происходит инжектирование
	изменений в DOM дерева браузера!
	в таск sass добавляем .pipe(browserSync.reload({stream.true}))
	Модифицируем таск watch
	gulp.task('watch',['перечисляем таски которые надо выполнить до запуска таска watch'],function(){
	Вот так : gulp.task('watch',['browser-sync','sass'],function()
	Теперь сначала выполнятся таски в [] - до запуска watch
	это необходимо для корректного отображения изменений на момет запуска сервера
	таск watch логичнее расположить внизу.. последним таском.
	Теперь в консоли можно набрать gulp watch
	browser-sync выдает нам url-ы (local и External)
	external можно ввести на каком-либо другом устройстве внутри одной сети
	и там тоже будет автоматически происходить reload
	---------------------------------
       Local: http://localhost:3000
    	External: http://192.168.56.1:3000
 	-------------------------------------
          UI: http://localhost:3001 - позволяет настраивать browser sync
 	UI External: http://192.168.56.1:3001
	 -------------------------------------

	 Следим за изменениями в html и js используя функцию .reload
	 в таск watch добавляем:
	 gulp.watch('app/*.html',browserSync.reload); - указываем что надо следить за всеми файлами html
	 gulp.watch('app/js/**/*.js',browserSync.reload); - указываем что надо следить за всеми файлами включая поддиректории js
	 После изменений в gulpfile.js надо перезапускать сервер!

9. Работа с js файлами, библиотеками.. их оптимизация..
	Сторонние дополнительные библиотеки скриптов нуждаются в сжатии.
	Пользовательский common.js не сжимаем, т.к. с ним работаем.
	В папке app создаем папку libs куда сваливать будем все библиотеки
	Для установки сторонних библиотек можно использовать bower. (http://bower.io)
	В консоли npm i -g bower (обязательно с ключем -g, так как надо установить глобально)
	! для работы bower обязательно должен быть установлен гит.
	Настроим установку пакетов с помощью bower в нашем проекте
	в корне папки проекта надо создать файл с именем .bowerrc
	Если система не дает установить файл с таким расширением.. можно испльзовать filezilla для создания файла. (в notepad создал флайл).
	В этом файле надо указать куда будем устанавливать пакеты с помощью bower
	{
		"directory": "app/libs/"
	}
	Устанавливаем плагины: bower i jquery magnific-popup (два плагина-библиотеки)
	bower создал две папки в libs
	В этих папках есть папки srс и dist (src - это аналог нашей "app")

	Создаем таск который будет собирать все файлы наших библиотек скриптов в один файл и минифицировать. для этого установим два пакета.. для канкатенации и для сжатия
	npm i gulp-concat gulp-uglifyjs --save-dev (--save-dev чтобы сохранились версии пакетов)

	Подключаем эти библиотеки вверху в файле gulpfile.js
	concat = require('gulp-concat')... то же и с другим пакетом.

	Теперь создаем таск для сборки и сжатия всех скриптов.

	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 в котором канкатенируем файлы в один
		.pipe(concat('libs.min.js')) // libs.min.js произвольное имя даем сами для создаваемого "объединенного файла"
		.pipe(uplify()) // сжимаем
		.pipe(gulp.dest('app/js')); // указали куда выгружаем (только директории!)

	});

	Проверяем работу таска: gulp scripts
	В папке app/js/... появился файл libs.min.js

	В нашем index.html внизу подключим теперь наши скрипты.
	<!-- сначала подключаем библиотеки -->
	<script src="js/libs.min.js"></script>
	<!-- затем кастомный -->
	<script src="js/common.js"></script>

	Проверяем: gulp watch .. проверяем работу jquery .. пишем в common.js

	Теперь сделаем компилирование до запуска сервера..
	в gulp.task('watch',[... дописываем 'scripts'])

10. Подключаем файлы стилей.
	в папке sass создаем файл libs.sass куда у нас будут импортироваться все наши библиотеки.
	@import "app/libs/magnific-popup/dist/magnific-popup" // импортировать можно как sass так и css файлы. Если импортируем css то расширение можно не указывать.
	На выходе мы к файлу main.css получим файлик libs.css если выполним таск "sass"
	Но файл импортировался не минифицированный.
	Для минифицирования css файлов нужны будут инструменты: 'css-nano' и 'gulp.rename' чтобы переимеровать файл.. указав что это "min" файл.
	npm i gulp-cssnano gulp-rename --save-dev
	После установки библиотек подключаем их в gulpfile.js
	cssnano = require('gulp-cssnano'),
	rename = require('gulp-rename');
	Теперь создаем соответствующий таск css-libs который будет сжимать все libs

	gulp.task('css-libs', function(){
    return gulp.src('app/css/libs.css') // в этом файле мы подключили все библиотеки
    // дальше мы его минифицируем
    .pipe(cssnano())
    // переименюем файл и добавим суфикс
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('app/css'));// указали куда выгружаем
	});

	Дальше надо добавить css-libs в watch.
	из таска watch можно убрать таск sass и перенесем его в таск css-libs
	Теперь при обращении к таску css-libs сначала будет запускаться sass, а затем отрабатывать таск css-libs в watch.
	теперь подключение watch выглядит так: 
	gulp.task('watch',['browser-sync','css-libs','scripts'],function(){
	подключение css-libs выглядит так:
	gulp.task('css-libs',['sass'], function(){

	Теперь в index.html в head подключаем <link rel="stylesheet" href="css/libs.min.css">
	После запуска gulp watch.. в папке css получаем файл libs.min.css где сжатые css стили библиотек.

11. Подготовка к продакшину.
	зальем несколько картинок в app/img
	В dist будем сваливать только все откомпилированное
	Для продакшена создадим отдельный файл build

		gulp.task('build', function(){
	  // из app в dist перенести файлы.
	  // если нам надо обработать несколько src и сделать мультифункциональный таск
	  // создаем переменную и присваиваем ей src всех файлов ктороые будем переносить
	  var buildCss = gulp.src([
	    'app/css/main.css',
	    'app/css/libs.min.css',
	  ])
	  // пишем куда будем выгружать при выполнеии сборки (build)..(указываем только директории!)
	  .pipe(gulp.dest('dist/css'));
	  // если будем использовать шрифты.. тоже должны их перенести
	  var buildFonts = gulp.src('app/fonts/**/*') // выбираем все.. включая поддиректории
	  // отправляем шрифты в дистрибутив
	  .pipe(gulp.dest('dist/fonts')); // если шрифтов нет.. создаваться ничего не будет
	  // дальше надо перенести все js файлы
	  var buildJs = gulp.src('app/js/**/*')
	  // переносим
	  .pipe(gulp.dest('dist/js'));
	  // переносим html
	  var buildHtml = gulp.src('app/*.html')
	  // выгружаем
	  .pipe(gulp.dest('dist'));

	});

	Чтобы перед выгрузкой в dist в этой папке не оставалось "мусора" от прежних обработок.. подключим пакет npm i del --save-dev
	После установки подключаем как обычно.. в gulpfile.js
	До watch создадим новый таск clean который будет чистить папку dist

	// task для очистки папки продакшена dist 
	gulp.task('clean', function(){
	  return del.sync('dist');// синхронизируется и удаляется папка dist 
	  // при выполнении gulp clean папка dist удаляется.
	});

	Дальше надо модифицировать таск build, так как удалять папку dist надо только в процессе сборки нашего проекта, т.е. выполнения таска build.. добавляем в  скобки [ вызовы тасков]
	gulp.task('build',['clean','sass', 'scripts'], function(){
	Проверяем компиляцию таском gulp build
	В папке dist появились наши файлы продакшн.

12. Автоматическая оптимизация изображений.
	Устанавливаем для этих целей два пакета.
	npm i --save-dev gulp-imagemin imagemin-pngquant
	Подключаем пакеты в gulpfile.js
	imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');
    Создаем таск img где-то до watch...

    // таск обработки изображений
	gulp.task('img', function(){
	  return gulp.src('app/img/**/*')
	  // дальше производим сжатие.. imagemin имеет параметры {....}
	  .pipe(imagemin({
	    // параметры
	    interlaced: true,
	    progressive: true,
	    svgoPlugins: [{removeViewBox: false}], // для работы с svg 
	    use: [pngquant()]
	  }))
	  // выгружаем
	  .pipe(gulp.dest('dist/img'));
	});

	Теперь модифицируем таск build
	gulp.task('build',['clean','img','sass', 'scripts'], function(){ // добавили img
	чтобы в процессе сборки обрабатывались изображения.
	Проверим: gulp build .. в dist/img появились оптимизированные изображения.
	Но если в проекте испльзуется много картинок, они обрабатываются очень долго.
	Поэтому к обработке изображений будет уместно добавить кэш.. чтобы картинки кэшировались.
	npm i gulp-cache --save-dev
	Подключаем в gulpfile.js
	cache = require('gulp-cache');
	Дальше модифицируем таск img: обернем .pipe(imagimin({..})) в cache()
	будет выглядеть так: .pipe(cache(imagemin({
	...
	})))
	Но! если в дальнейшем мы перенесем папку изображений.. из-за кэша пропадет минификация изображений. Надо сделать таск для очистки кэша.
	Для этих целей создадим дополнительный таск clear
	// таск для очистки кэша
	gulp.task('clear', function(){
	  // будем вручную запускать при необходимости очистки кэша
	  return cache.clearAll();
	});

13. Автоматическое создание вендорных префиксов
	Устанавливаем пакет npm i --save-dev gulp-autoprefixer
	Подключаем в gulpfile.js  autoprefixer = require('gulp-autoprefixer');
	Для сторонних библиотек подключать не нужно.. там уже разработчики оптимизировали код.
	Используем только для своих кастомных файлов.
	Модифицируем таск sass
	После преобразования sass -> css выполняем:
	.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true}))
	 'last 15 versions' - оптимизация для последних 15-ти версий всех браузеров	
	 '> 1%' - параметр для ie (версии)
	 'ie 8' - поддержка
	 'ie 7' - поддержка
	 { cascade: true} - включаем каскадирование, чтобы код был красивый и читаемый
	 проверяем.. gulp watch .. в sass пишем .. display:flex

	 Для того чтобы npm установил все пакеты которые прописаны в package.json, например если мы скачали этот проект с гитхаба.. нужно из корневой папки проекта в консоли запустить команду npm i  и все пакеты установятся автоматически
	 
	 При создании нового проекта достаточно будет скопировать только два файла: gulpfile.js и package.json
	 После чего в новой папке проекта в консоли пишем npm i
	 Все пакеты установятся автоматически
	 Команда npm up обновит все модули.


	 Для того чтобы при возникновении ошибки в sass скрипт watch не перывал свою работу и выводил на понятном языке предупреждение об ошибке.. в таск sass добавим строчку:
	 .on('error', sass.logError)