Сборка проектов на Bitrix

Включение модуля в сборку:

Устаравливаем модуль:

npm install gulp-bitrix --save-dev

В gulpfile.js вызываем модуль с параметрами. Например:

var tasks = require('gulp-bitrix')({dirName: __dirname});

Опцию dirName желательно указывать, чтобы сборка брала корневую папку вашего проекта, а не корневую папку модуля.

Задачи:

Модуль возвращет объект, который содержит в себе функции, которые можно вызывать в задаче.

На данный момент, содержит в себе задачи:r

def - выполняется сборка и включается watcher
one - выполняется сборка, без запуска watcher
dev - выполняется сборка c настройками среды development и включается watcher
one - выполняется сборка c настройками среды development, без запуска watcher
prod - выполняется сборка c настройками среды production и включается watcher
prodOne - выполняется сборка c настройками среды production, без запуска watcher
sass - сборка sass-файлов
sassProject - сборка файла project.css
sassComponents - сборка стилей в папках компонентов Битрикса
js - babel-сборка js файлов
jsx - babel-cборка jsx файлов
jsComponents - сборка js-файлов в комонентах Битрикс
fonts - сборка шрифтов
img и pic - минификация картинок из разных директорий
clean - очистка файлов проекта
fullClean - очистка папки build
setProd - установка режима Production
setDev - установка режима Development
watch - watcher
getEnv - получение из файла .env данных о среде

Также можно получить некоторые опции по-умолчанию:

path - пути к файлам проекта по-умолчанию
options - путь к переданным опциям
gulp - ссылка на объект gulp модуля

Пример использования модуля через свойство:

gulp.task('default', tasks.def);

Любую из стандартных задач можно переопределить, просто присвоив другую функцию:

tasks.sass = function(callback) {
         console.log('custom-sass-task');
         callback();
     };

Можно добавлять новые задачи с помощью функции addTask(name, task) где: name - название новой задачи; task - функция.

    tasks.addTask('custom', function(callback) {
        console.log('custom');
        callback();
    });

Функции подключаемые вами пользуются модулями, которые подключены в вашем Gulp-файле. То есть если вы собираетесь пользоваться только стандартными функциями - то модуль будет работать без дополнительных подключений. Если вы хотите переопределить или добавить свою задачу - нужно будет определить модули, которые используются в задаче.

Также имеется возможность развернуть задачи одной командой.

tasks.init(gulp)

В функцию передается текущий экземпляр gulp.

Default - функция gulp при этом не создается, вместо нее устанавливается функция 'def'. Ее можно определить в вайшей default-функции

gulp.task('default', gulp.series('def'))

Или задать функции task.init() опцию initDefault:

tasks.init(gulp, {initDefault: true})

Внимание!
Если вы переопределяете стандартные задачи, добавляете свои или изменяете настройки путей - это нужно делать до того как будет вызван tasks.init(), иначе будут приняты только те изменения, которые были до ее вызова.

Еще один способ переопределить стандартные задачи - это просто определить их через gulp.task, опять же это делается до вызова функции init().

 // Эта задача заменит стандартную
 gulp.task('sass', function (callback) {
     console.log('custom-sass');
     callback();
 });
 
 tasks.init(gulp, {initDefault: true});

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

Переопределение путей:

Есть два способа - сделать это путем изменения в модуле:

tasks.path.build.js = './my-folder/script.js';

Либо передать в опциях при вызове модуля:

var tasks = require('gulp-bitrix')(
    {
        dirName: __dirname,
        path: {build: {js: './my-folder/'}}
    }
);

Но такой способ годится для более радикального изменения, так как будет изменено свойство build полностью.

Опции:

При вызове модуля ему можно передать ряд опций:

dirName - директория относительно которой проставлены пути
path - с помощью этой опции можно поменять пути к файлам. Изменения свойств объекта path происходит путем наложения объекта, то есть определив одно свойство другие остаются как и были.
includeTasks - массив в котором можно перечислить задачи, которые будут выполнены в сборке. Если ничего не указано, выполняется весь список.
excludeTasks - массив в котором можно перечислить задачи, которые не будут выполняться. Если ничего не указано, то все задачи будут выполнены.
includePath - используется для определения пути к файлам sass, которые подключаются в project.sass
staticFolder - стоит менять только если папка сборки находится в другом месте, нежели корневая папка используемых в задаче файлах
sourcemaps - если выставлена эта опция - то будут генерироваться sourcemaps на сборке dev
developmentWatchDelay - задержка watcher-a в изменении файла в development-среде
productionWatchDelay - задержка watcher-a в изменении файла в production-среде
sprite.imgName - можно указать имя файла, который будет создан при сборке спрайта (по-умолчанию "sprite.png")
sprite.cssName - можно указать имя sass-файла, который будет создан при сборке спрайта (по-умолчанию "sprite.sass")