отредактируем наш исходный код:

 

 
var gulp = require('gulp');
gulp.task('mytask', function() {
console.log('Привет, я Task!');
});
 

 

Теперь давайте сделаем что-нибудь по сложнее:

 

  var gulp = require('gulp');
  gulp.task('mytask', function() {
  return gulp.src('source-files')
  .pipe(plugin())
  .pipe(gulp.dest('folder'))
  });
return - возвращает функцию
'source-files' - мы взяли какие то файлы
gulp.src - базовая функция обрабатывает то, что в скобках 🙄 
.pipe - вызов какой то команды или плагина
 dest - от destination (место назначение)

 

т.е. берем файл → что то делаем с ним → и выводим результат - это и есть задача  gulp 

Это был просто пример) - он не рабочий - а учебный.

 


 

А теперь сделаем что-нибудь полезное. 🙂

Сделаем препроцессинг  sass  , установим пакет  galp sass  с сохранением версии в  package.json  .

 

Вообще любые gulp-пакеты - для любых задач - они легко гугляться.

 


 

Давайте установим sass.

 

Т.е. с сохранением версии пакета в  package.json


Начнется установка sass:

galp-sass  установлен!

 

Дальше мы подключаем плагин  sass

А кстати, переменные для подключения - можно перечислять через запятую.

 

 

var gulp = require('gulp');
        sass = require('gulp-sass');    - подключаем sass-пакет, который установили сейчас.
});

 

перейдем в папочку  app  →  sass 

и создадим тут файл  main.sass

 

И давайте напишим код в нем.

 

Например, зададим бэкграунд для body

 

 

 

Перейдем в    gulpfile.js 

и напишим Таск

 

 

Сохраним наш файл   gulpfile.js 

И перейдем в папку   app 

 

И запустим   terminal  из этой папки

 

 

Выполним таск:

 

 

 

И получим результат Автоматической КОМПИЛЯЦИИ SASS  →  CSS

 

 

Познакомимся с выборкой файлов:

 

Здесь она простая (указан файл на прямую)

 

 

   return gulp.src('app/sass/main.sass')

 

Но ФАЙЛЫ также можно выбирать по шаблону  Glob 

 

Это шаблон для работы с файлами выборки во многих отраслях.

 

Так, самые распространенные шаблоны, например:

 

var gulp = require('gulp'),
       sass = require('gulp-sass');
gulp.task('sass', fuction() ) {
     return gulp.src('app/sass/main.sass')
                 .pipe(sass())
                 .pipe(gulp.dest('app/css'))
});

 

Шаблон: В этом случае не важно какое будет имя у файла - главное, что бы расширение было  sass  .

 

Т.е. выберем все файлы с расширением sass в директории  sass.

 

/**/   - директория-под-директория, т.е. таким шаблоном мы выбираем малого того что все файлы  *.sass    директории  sass

но еще в любом количестве директорий  - мы выбираем все файлы - не важно какая будет стрктура  - все что находится в

  app/sass  - все у нас будет выбираться.

 

Тут все файлы   *.js    будут выбираться.

 

 

Восклицательный знак означает - что выборка файла  main.sass   исключиться  из выборки.

 

Т.е. все файлы - кроме этого - будут обрабатываться.

 

 

Или же, как массив.

 

Таким образом - мы выбирем все файлы   sass   кроме

main.sass 

 

 

Еще шаблон выборки:

 

 

Таким образом - мы выбираем все   scss 

и все   sass    файлы в директории   sass 

 

А если так написать:

 

 

То мы выбираем не только в диретории   sass 

, но и во всех поддиректориях.

 

Но нас устроит и проще:

 

 

отступление:

 

Если мы в папке  app/sass   создадим файл:

 

 

 

Файлы - имя которых начинается с подчеркивания  - они не участвуют в компиляции как отдельные файлы - а добавляются только импортом.

 

Т.е. их можно импортировать в  sass - через импорт:

 

 

Давайте откроем для примера файл:

 

И напишем в нем:

 

 

 

и импортируем его в   main.sass 

 

 

Выполним таск  sass 

в терминале

 

 

и перейдя в файл  main.css   увидим

ВСЕ ИЗМЕНЕНИЯ ФАЙЛИКАХ  ( _part.sass ,  main.sassgulpfile.js ,  )  СОХРАНЯТЬ

 

 

Т.е. файлик   _part.sass   не компилируется, а импортируется как заплатка.

 

 

Логично было бы сделать наблюдение за изменениями  в файлах. Т.е. если мы вносим какие то изменения в файлах, то у нас должны выполнятся  таски 

 

Т.е.  если мы изменяем   sass  файл - то он  должен автоматически компилироваться.

 

Для этого:

 

Gulp  поддерживает метод   wath - для проверки сохраняемых файлов - и имеет простой синтаксис.

 

Создадим  таск   - который будет следить за файлами  scss

 

Допишим в файл  gulpfile.js 

 

Всегда начинаем с   gulp.task(); 

 

 watch - название таска, который следит за изменениями файлов.

Выполняем  function()        gulp.watch(''); 

 

и что собственно  watch !   а следить будем по нашему шаблону:

 

 'app/sass/**/*.sass'   и еще массив тасков, которые мы будем выполнять  - в нашем случае это  sass  .

 

  С О Х Р А Н Я Е М  

 

var gulp = require('gulp');  
sass = require('gulp-sass');

gulp.task('sass', function() {
return gulp.src('app/sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('app/css'))
} );

gulp.task('watch', function(){
gulp.watch('app/sass/**/*.sass', ['sass']);
})   

 

 

Давайте выполним  наш таск  watch  в консоли

 

 

И у нас начался процесс   ВОТЧИНГА ( слежения )

 

Давайте изменим что-нибудь в файле   main.sass 

 

 

Автоматически  компилируется в файл :  main.css 

 

 

 

  ОК! - Работает! 

 

Давайте перейдем теперь в папку

 

 

И откроем  index.html     и сделаем базовую разметку:

 

 

 

Подключим    link 

 

 

 

 

И напишим какой то   lorem 

 

 

 

 

И было бы не плохо сделать автоматическое обновление   css      на странице - при сохранении.

 

Для этого, используем инструмент, который  запустит сервер 

(запустит сервер)  и   обеспечит нам слежение  

за файлами и автоматическим обновлением ( Life reload )

 

Для   Life reload    мы будем использовать браузер   synk  

 

Причем  reload  будет происходить не только в одном браузере, но и во всех браузерах сети:

 

Мобильные устройства

 

и любые компьютеры в одной WiFi-сети

 

browsersync.io

 

 

   npm install -g browser-sync  

 

Но мы не будем устанавливать его глобально, а установим его в папку проекта

 

   myproject   

 

Но сначала - выйдем из    watching 

 

Перейдем в консоль:

 

И нажмем 2 раза     Ctrl + C  

 

Давайте установим    browser sync

 

npm i browser-sync  --save-dev

 

 

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

 

 

  УСТАНОВКА  bowser sync  ЗАВЕРШЕНА! 

 

Видим что он появился в

 

 

 

 

 

 

 

открываем

  gulpfile.js  

и подключаем     browser sync 

 

и подровняем все знаки   равно    =  

 

 

 

Создаем   таск   для    browser sync 

 

 

Задавая   1-й параметр  , давайте выберем папку которая будет сервером 

Путь это будет папка    app 

 

 

Давайте выполним таск    browser sync 

 

  gulp browser-sync 

 

 

 

Отключаем уведомления в    browser sync 

 

 

 

Теперь наша связка  live reload   настроена, а именно:

 

Если файл  main.sass  - изменяется,

 

то автоматом  постится  измененный   main.css  

 

в   index.html  

 

Происходит именно ижект  main.css   в дом  дерева   - и автоматически применяются   css  - правила 

 

Это позволяет намного быстрей применять изменения!

 

Давайте, немного модифицируем наш  таск   sass 

 

 

И в приципе - можно запускать!

 

Мы запускаем - именно   tast  watch  ,

 

который включает     browser sync 

 

и включает    sass  

 

Т.е. - будем вотчить ( следить )  файлы    sass  

 

 

Переходим в консоль:

 

Для начала - ВЫКЛЮЧИМ НАШ СЕРВЕР

 

 

И введем:    gulp watch 

 

 

И запуститился браузер:

 

 

Давайте разберем консоль:

 

 

И сходим в     User Interface  : 3001 

 

 

 

Мы здесь ничего не меняем - тут и так все хорошо работает!

 

 

Давайте попробуем изменить что-нибудь в   main.sass