Инструкция по использованию Gulp

gulp.md

Инструкция по использованию Gulp

1. Для работы с Gulp необходимо установить Node.js

2. Переходим в папку проекта и там же запускаем cmd, в которой будем выполнять его инициализацию.

   Команда: npm init

   После запуска команды, заполняем необходимые данные.

   После заполнения всех необходимых полей в папке проекта появится файл package.json.

   Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.

3. Установка Gulp в наш проект.

   Команда: npm i gulp --save-dev

4. Необходимо в папке проекта создать файл gulpfile.js

5. В данном файле пишем: js var gulp = require('gulp');

6. Создание тасков.

   Делается в том же файле

   gulp.task('mytask', function () {
      return gulp.src('source-files') // Выборка исходных файлов для обработки плагином
         .pipe(plugin()) // Вызов Gulp плагина для обработки файла
         .pipe(gulp.dest('folder')) // Вывод результирующего файла в папку назначения (dest - пункт назначения)
   })

7. Создание обработчика, который будет компилировать SASS-файлы в CSS:

   7.1. Установка пакета.

    **Команда**: `npm i gulp-sass --save-dev`
   

   7.2. Подключение gulp-sass в файле `gulpfile.js.

    **Команда**: ```js var sass = require('gulp-sass'); //Подключаем Sass пакет```
   

   7.3. Создание таска:

    ```js
    gulp.task('sass', function(){ // Создаем таск "sass"
     return gulp.src('app/sass/**/*.sass') // Берем все sass файлы из папки sass и дочерних, если таковые будут
        .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
        .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
    });
    ```    
   

8. Наблюдение за изменениями в файлах (Gulp Watch)

   Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:

   gulp.watch('watch-files', ['task1', 'task2']); 

   Если мы, например, хотим наблюдать за всеми изменениями в файлах SASS нашего проекта, то можем использовать следующую конструкцию:

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

   Gulp наблюдает за всеми SASS-файлами и при сохранении выполняет таск SASS, который автоматически компилирует их в CSS -файлы.

   Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами:

   gulp.task('watch', function() {
      gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами
   });

9. Дополнительно:

   • Автоматическое обновление страниц с использованием Browser Sync

   Команда: npm i browser-sync --save-dev

   • Конкатенация файлов

     Команда: npm i --save-dev gulp-concat

   • Сжатие JS-файлов

     Команда: npm i --save-dev gulp-uglifyjs

   • Пакет для минификации CSS

     Команда: npm i --save-dev gulp-cssnano

   • Библиотека для переименования файлов

     Команда: npm i --save-dev gulp-rename

   • Библиотека для удаления файлов и папок

     Команда: npm i del --save-dev

   • Библиотека для работы с изображениями (сжатие)

     Команда: npm i gulp-imagemin --save-dev

   • Библиотека для работы с жатием png-файлов

     Команда: npm i imagemin-pngquant --save-dev

   • Библиотека кеширования

     Команда: npm i gulp-cache --save-dev

   • Автоматическое добавление вендорных префиксов CSS

     Команда: npm i --save-dev gulp-autoprefixer