3 Август 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

Как установить gulp и плагины

Махровый халат с именной вышивкой - эксклюзивный подарок для всей семь!

Gulp и множество утилит для него подходят для решения любых задач в разработке от небольшого сайта до крупного портала.

Все проекты использующие gulp имеют в корне файл gulpfile.js.

Для начала устанавливаем gulp у нас должен быть установлен node.js.

Скачиваем его с официального сайта, последнюю версию.

Скачать node.js

Содержание статьи

1 Создаем новый проект
- 1.1 Создаем две новые папки
2 Наш первый task
3 Устанавливаем пакет gulp sass
4 Метод для автоматических изменений стилей

Создаем новый проект

Создаем папку для проекта с любым названием, например, project.

Заходим в нее, зажимаем shift и удерживая его нажимаем правою кнопку мышки.

В появившемся окне выбираем пункт с названием открыть окно команд.

Для устанвоки gulp прописываем команду npm I gulp -g.

Создаем папку для проекта
G означает, что мы устанавливаем глобально.

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

Создаем проект командой npm init.

создаем проект gulp
В папке project появится файл package.json.

Давайте его откроем в программе sublime text 3.

Видим всю информацию, которую прописали в окне консоли.

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

Удобно при создании новых проектов с уже заготовленным файлом.

Устанавливаем gulp в наш проект командой npm i gulp –save-dev.

Ключ --save-dev позволяет сохранять версию в package.json.

устанавливаем gulp в проект
Также появится новая папка node_modules, в которой содержится пакет gulp и необходимые зависимости для корректной работы основного пакета.

Создаем две новые папки

app
dist

Создаем папки проекта gulp

В папке app создаем пять папок.

папку css тут все стили
fonts где лежат шрифты
img для картинок
js для скриптов
sass для файлов с этим расширением.

Переходим в корневую папку проекта project.

Мы создали структуру проекта.

В папке app лежат все исходники проекта.

В папке дист будет готовый продукт после сборки оптимизированный и сжатый.

Наш первый task

Создаем gulpfile.js в корне.

Открываем его и прописываем первую строчку подключения модуля, который установили.

Также создаем task.

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

var gulp = require('gulp');

gulp.task('task', function() {

console.log('Привет');

});

создаем task в gulp
Разберем пример посложнее с возвратом функции return базовой команды gulp это gulp.src, которая для обработки берет файлы, попадающие в выборку source-files.

После вызываем команду или плагин с помощью .pipe (plugin ()), плагин это функция, которая подключается к нашему проекту.

Pipe выполняет команду.

Теперь необходимо выгрузить результат работы плагина.

Пишем .pipe (gulp.dest (‘folder’)).

Dest это путь назначения сокращенно, то куда выгружаем результат, с указанием папки.

В этом примере вся задача gulp. Берем результат и выводим.

var gulp = require('gulp');
 gulp.task('task', function() {
 return gulp.src('source-files') 
 .pipe(plugin())
 .pipe(gulp.dest('folder')) });

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.

препроцессор sass

Дальше подключаем 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))

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'))
});

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 и пропишем.

body
  background-color: #000

1 2	body background-color: #000

Выполним команду в gulp sass, то в результате в файле main.css мы увидим, что он скомпилировался.

body {
  background-color: #000; }

1 2	body { background-color: #000; }

команда gulp sass

Метод для автоматических изменений стилей

Чтобы все изменения происходили автоматически воспользуемся методом gulp.watch для проверки сохраняемых файлов.

Выбираем все sass файлы и через запятую в квадратных скобках указываем массив тех тасков, которые будем выполнять, в нашем случае task 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'])
});

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 файл.
gulp.watch

Чтобы видеть в браузере как изменяется стиль, нужно подключить livereload browser-sync.

Комментариев нет

Комментарии запрещены