отредактируем наш исходный код:
| 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.sass , gulpfile.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-сети
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
