/ DEV

Автоматизация при помощи Gulp

Gulp - это инструмент, который помогает автоматизировать рутинные задачи веб-разработки. Например, для того, чтобы запустить компиляцию .sass в .css мы вводим в командной строке:

sass sass/styles.sass css/styles.css

Согласитесь, запускать компиляцию каждый раз, когда мы хотим увидеть результат после изменения исходного Sass-файла весьма неудобно, тут то нам и поможет Gulp.

Для работы с Gulp у вас должен быть установлен Node.js, вместе в с ним в сисетму установится пакетный менеджер npm(Node Package Manager).

Для установки Gulp выполните в терминале следующую команду:

npm i gulp -g

Создадим папку проекта и внутри нее запустим инициализацию проекта:

npm init

После ответа на все вопросы в папке появится файл package.json. Это файл манифест нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте. Например, если мы установим в проект Gulp с ключом --save-dev, то пакет и используемая версия автоматически добавится в наш package.json

Давайте установим в наш проект Gulp и Gulp-Sass:

npm i --save-dev gulp gulp-sass

Любой проект, использующий Gulp имеет в корне файл gulpfile.js, который содержит набор инструкций по управлению проектом. У нашего файла должно быть следующее содержание:

// подключаем пакеты
var gulp = require('gulp'),
    sass = require('gulp-sass');

// создаем таск
gulp.task('sass', function() {
  return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // исходные файлы
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) // компиляция
    .pipe(gulp.dest('css')) // результат
  });
// отслеживаем изменения
gulp.task('watch', function() {
  gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ['sass']);
});

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

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