Сборка с Gulp

На наш взгляд является как наиболее востребованной, так и наиболее удобной.

Тому, кто знаком с gulp и прочитал про универсальный метод генерации сетки, может прийти в голову идея создания отдельного gulp task.

Действительно, в gulpfile.js мы можем написать код, подобный расположенному ниже. Пример сделан для Gulp-4.

const gulp = require('gulp');
const smartGrid = require('smart-grid');
 
const options = {
   /* your grid settings here */
};
 
function grid(done){
   smartGrid('path-to-your-folder', options);
   done();
}
 
gulp.task('grid', grid);

Однако, есть ли у этого какая-либо выгода? Если и есть, то небольшая.

Разница получается формальная, в универсальном методе мы запускаем генерацию сетки с помощью node smartgrid.js, а сейчас должны будем написать в терминале gulp grid

Наиболее эффективный способ требует чуть большего знания js и gulp.

1. Выносим настройки smartgrid в отдельный файл, делаем из него commonJS-модуль, экспортирующий объект.
2. В функции grid импортируем объект из данного файла.
3. Подписываемся gulp watch на файл с настройками.
4. Плюс маленькая неизбежная хитрость - сбрасываем кэш функции require для подключения данного файла.

Рассмотрим код для реализации данной схемы.

smartgrid.js

module.exports = {
   /* your grid settings here */
};

gulpfile.js

const gulp = require('gulp');
const smartGrid = require('smart-grid');
const path = require('path');
const gridOptPath = './smartgrid.js';
 
function grid(done){
   delete require.cache[path.resolve(gridOptPath];
   let options = require(gridOptPath);
   smartGrid('path-to-your-folder', options);
   done();
}
 
function watch(){
   gulp.watch(gridOptPath, grid);
}
 
gulp.task('grid', grid);
gulp.task('watch', grid);

Внимание!

Без фрагмента delete require.cache обновление файла с настройками правильно переделает сетку только в первый раз. Затем на время работы task watch модуль gridOptPath будет закеширован.

Разумеется, важно понимать, что в task watch у вас есть немало других строк, на отслеживание изменений в js, css и html файлах.

Строка delete require.cache[path.resolve(gridOptPath] , как и идея вынести настройки сетки в CommonJS модуль, может вызывать ужас у любителей Node.

Действительно, гораздо логичнее смотрится идея создать json-файл и отслеживать изменения в нём. Подключение такого файла не будет кэшироваться, а json легко превращается в javascript-объект.

Однако, json-формат, привычный javascript-разработчикам, легко взбесит верстальщика, неискушённого в js. Запрет на одинарные кавычки, обязательные кавычки у ключей объекта...