Блог о веб-разработке > Gulp > Gulp для начинающих

Gulp для начинающих

Gulp – это инструмент автоматизации front-end разработки. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу. Возможно вы уже работали с другой системой сборки Grunt. Сравнение Gulp и Grunt показывает, что Gulp на данный момент более перспективный инструмент и стоит обратить на него внимание.

Основные задачи, которые вам поможет решить Gulp:

Минимизация и конкатенация Javascript и CSS файлов;
Минимизация HTML;
Использование CSS препроцессоров Sass, Less, Stylus и других;
Оптимизация изображений;
Автоматическая простановка вендорных префиксов;
Использование шаблонизаторов (Jade);
Удаление неиспользуемого CSS (UnCSS);
Валидация кода и тестирование;

Ссылки на ресурсы

Официальный сайт Gulp gulpjs.com
Gulp на Github
Каталог плагинов для Gulp http://gulpjs.com/plugins/
Документация Gulp (на английском) ссылка

Установка Gulp

На вашем компьютере должен быть установлен Node.js. Скачать его можно по ссылке. Небольшая инструкция по установке.

После установки Node.js откройте командную строку и введите команду:

npm install --global gulp

1	npm install --global gulp

npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

Флаг --global указывает, что Gulp надо установить на компьютер глобально для использования в любом месте системы.

Создание проекта

Создадим папку project для нашего проекта. Откройте командную строку и перейдите в папку с вашим проектом:

cd <путь к папке>

1	cd <путь к папке>

Введите команду

npm init

npm init

Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

Когда файл package.json создан, мы можем установить Gulp с помощью команды:

npm install gulp --save-dev

1	npm install gulp --save-dev

На этот раз –g не был использован и Gulp локально установится в папку project.

--save-dev вносит в уже существующий файл package.json запись о Gulp в секцию devDependencies.

После выполнения команды вы увидите, что в директории project появилась папка node_modules, внутри которой лежит папка Gulp.

Мы почти готовы начать проект с Gulp. Но перед этим необходимо определиться со структурой проекта.

Определяем файловую структуру

Gulp достаточно гибок, чтобы работать с любой файловой структурой. В этом проекте мы будем использовать следующую структуру:

--save-dev

В папке app будет находится рабочая версия проекта. В папке dist будет лежат продакшн версия проекта.

Мы должны помнить об этой структуре файлов, когда конфигурируем задачи Gulp.

Создадим первую задачу в файле gulpfile.js , в котором хранится вся конфигурация Gulp.

Пишем первую задачу Gulp

Базовый синтаксис задачи Gulp:

gulp.task('task-name', function() {
  
});

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

});

task-name ссылается на имя задачи, которое вы будете использовать для запуска задачи. Задачу можно запустить командой gulp task-name.

Для теста создадим задачу hello, которая выведет Hello Zell!

gulp.task('hello', function() {
  console.log('Hello Zell');
});

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

console.log('Hello Zell');

});

Запустим команду gulp hello в командной строке.

В командной строке появится сообщение Hello Zell!

Задачи в Gulp обычно намного сложнее. Вот как может выглядеть реальная задача:

gulp.task('task-name', function () {
  gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

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

gulp.src('source-files') // Get source files with gulp.src

.pipe(aGulpPlugin()) // Sends it through a gulp plugin

.pipe(gulp.dest('destination')) // Outputs the file in the destination folder

})

Как вы видите, реальная задача содержит два дополнительных метода gulp.src и gulp.dest .

gulp.src говорит, какие файлы использовать для выполнения задачи.

gulp.dest указывает, куда положить файлы после выполнения задачи.

Создадим реальную задачу, где мы скомпилируем Sass файлы в Css.

Препорцессинг с Gulp

Мы можем компилировать Sass в Css с помощью плагина gulp-sass. Для установки gulp-sass надо запустить команду:

$ npm install gulp-sass --save-dev

1	$ npm install gulp-sass --save-dev

В gulpfile.js необходимо записать:

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

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

Создадим задачу sass()

[crayon-6478c6874f3e6147179950 inline="true" ]
gulp.task('sass', function(){
  gulp.src('source-files')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('destination'))
});

[crayon-6478c6874f3e6147179950 inline="true" ]

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

gulp.src('source-files')

.pipe(sass()) // Using gulp-sass

.pipe(gulp.dest('destination'))

});

[/crayon]
Далее нам необходимо создать файл

styles.scss

1	styles.scss

в папке app/scss и указать путь к этому файлу в gulp.src. Скомпилированный файл styles.css будет лежать в папке app/css. Укажем эту папку в gulp.dest.

gulp.task('sass', function(){
  gulp.src('source-files')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('destination'))
});

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

gulp.src('source-files')

.pipe(sass()) // Using gulp-sass

.pipe(gulp.dest('destination'))

});

Для проверки правильности настройки задачи, добавим функцию sass в файл styles.scss .

// styles.scss
.testing {
  width: percentage(5/7);
}

// styles.scss

.testing {

width: percentage(5/7);

}

Если вы запустите команду gulp sass в командной строке, то вы увидите, что в папке app/css появится файл styles.css , в котором будет следующий код:

/* styles.css */
.testing {
  width: 71.42857%; 
}

/* styles.css */

.testing {

width: 71.42857%;

}

Теперь мы знаем, как работает задача sass.

Если вам необходимо выбрать несколько файлов в gulp.src, то можно использовать специальные выражения.

*.scss : Символ * — означает, что будут выбраны все файлы с расширением .scss в указанной директории;
*/*.scss — будут выбраны все файлы с указанным расширением в корневой папке и всех дочерних папках;
*/*.scss . Символ ! указывает, что данный файл надо исключить из выполнения задачи;
*.+(scss|sass) — позволяет выбрать для выполнения задач файлы с несколькими расширениями. В данном случае будут выбраны все файлы с расширениями .scss и .sass из указанной директории.

Теперь мы можем заменить app/scss/styles.scss на scss/ **/*.scss.

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

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

return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs

.pipe(sass())

.pipe(gulp.dest('app/css'))

})

Любой файл с расширением .scss находящийся в папке app/scss будет скомпилирован. Например, если добавить print.scss, то мы увидим, что в папке app/css появится скомпилированный файл print.css.

Компилируем Sass «на лету»

С помощью метода watch можно отслеживать изменения в файлах. Синтаксис метода:

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

1 2	// Gulp watch syntax gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

Если мы хотим отслеживать все Sass файлы, то необходимо заменить files-to-watch на app/scss/**/*.scss и [‘tasks’, ‘to’, ‘run’] [‘sass’]:

gulp.watch('app/scss/**/*.scss', ['sass']);

1	gulp.watch('app/scss/*/.scss', ['sass']);

Часто требуется отслеживать несколько типов файлов. Чтобы сделать это, мы группировать процессы в задаче watch:

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

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

gulp.watch('app/scss/**/*.scss', ['sass']);

// Other watchers

})

Плагины Gulp

Gulp Sass — использование препроцессора Sass
Gulp Jade — шаблонизатор Jade
UnCSS — удаление неиспользуемого CSS
gulp-watch — мониторинг изменений
Gulp autoprefixer — автоматическая проставновка браузерных префиксов

(43 votes, average: 3,33 out of 5)

Загрузка...