Gulp и множество утилит для него подходят для решения любых задач в разработке от небольшого сайта до крупного портала.
Все проекты использующие gulp имеют в корне файл gulpfile.js.
Для начала устанавливаем gulp у нас должен быть установлен node.js.
Скачиваем его с официального сайта, последнюю версию.
Содержание статьи
Создаем новый проект
Создаем папку для проекта с любым названием, например, project.
Заходим в нее, зажимаем shift и удерживая его нажимаем правою кнопку мышки.
В появившемся окне выбираем пункт с названием открыть окно команд.
Для устанвоки gulp прописываем команду npm I gulp -g.
G означает, что мы устанавливаем глобально.
Важно, что бы в пути до команды не было русскоязычных папок, путь весь на английском.
Создаем проект командой npm init.
В папке project появится файл package.json.
Давайте его откроем в программе sublime text 3.
Видим всю информацию, которую прописали в окне консоли.
Этот файл содержит информацию об используемых пакетах в программе.
Удобно при создании новых проектов с уже заготовленным файлом.
Устанавливаем gulp в наш проект командой npm i gulp –save-dev.
Ключ --save-dev позволяет сохранять версию в package.json.
Также появится новая папка node_modules, в которой содержится пакет gulp и необходимые зависимости для корректной работы основного пакета.
Создаем две новые папки
- app
- dist
В папке app создаем пять папок.
- папку css тут все стили
- fonts где лежат шрифты
- img для картинок
- js для скриптов
- sass для файлов с этим расширением.
Переходим в корневую папку проекта project.
Мы создали структуру проекта.
В папке app лежат все исходники проекта.
В папке дист будет готовый продукт после сборки оптимизированный и сжатый.
Наш первый task
Создаем gulpfile.js в корне.
Открываем его и прописываем первую строчку подключения модуля, который установили.
Также создаем task.
|
1 2 3 4 |
var gulp = require('gulp'); gulp.task('task', function() { console.log('Привет'); }); |
Разберем пример посложнее с возвратом функции return базовой команды gulp это gulp.src, которая для обработки берет файлы, попадающие в выборку source-files.
После вызываем команду или плагин с помощью .pipe (plugin ()), плагин это функция, которая подключается к нашему проекту.
Pipe выполняет команду.
Теперь необходимо выгрузить результат работы плагина.
Пишем .pipe (gulp.dest (‘folder’)).
Dest это путь назначения сокращенно, то куда выгружаем результат, с указанием папки.
В этом примере вся задача gulp. Берем результат и выводим.
|
1 2 3 4 5 |
var gulp = require('gulp'); gulp.task('task', function() { return gulp.src('source-files') .pipe(plugin()) .pipe(gulp.dest('folder')) }); |
Устанавливаем пакет gulp sass
Теперь попробуем сделать препроцесcор sass.
Установим пакет gulp sass в наш проект.
Открываем консоль и пишем команду npm gulp-sass –save-dev с сохранением пакета и версии в наш package.json.
Дальше подключаем gulp sass в наш проект.
Сперва создаем в папке app\sass файл main.sass и открываем его в программе sublime.
Переходим в gulpfile.js и прописываем переменную var sass = require (gulp-sass).
Создаем task с названием sass и через функцию выполняем действия.
Первое это return, т.е. вернуть функцию.
Вначале берем исходник gulp.src (app/sass/main.sass).
Дальше через pipe (sass ()) выполняем команду нашего плагина и выводим pipe (gulp.dest (app/css))
|
1 2 3 4 5 6 7 8 |
var gulp = require('gulp'); sass = require('gulp-sass'); gulp.task('sass', function() { return gulp.src('app/sass/main.sass') .pipe(sass()) .pipe(gulp.dest('app/css')) }); |
Перед началом выполнения taska зайдем в main.sass и пропишем.
|
1 2 |
body background-color: #000 |
Выполним команду в gulp sass, то в результате в файле main.css мы увидим, что он скомпилировался.
|
1 2 |
body { background-color: #000; } |
Метод для автоматических изменений стилей
Чтобы все изменения происходили автоматически воспользуемся методом gulp.watch для проверки сохраняемых файлов.
Выбираем все sass файлы и через запятую в квадратных скобках указываем массив тех тасков, которые будем выполнять, в нашем случае task sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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']) }); |
Запускаем процесс слежения командой gulp watch, чтобы при изменениях в sass файлах происходила автоматическая компиляция в css файл.
Чтобы видеть в браузере как изменяется стиль, нужно подключить livereload browser-sync.