Как прикрутить сетку SmartGrid к gulp-y?

Question

[lorentso]

Вопрос адресован в большей степени тем, кто испытывал сетку SmartGrid. У меня затруднения в том как ее использовать в моей сборке с gulp-ом.
В документации на Гитхабе написано,( без пояснений) что это можно сделать...Но у меня возникают вопросы -- как написать код, и куда его вставить.

Answer 1

[Brendan Castaneda]

На этом сайте всё довольно подробно описано.

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);

Comments

[lorentso]

Спасибо, но, прошу простить, все-таки не ясно полностью

Во-первых, у меня другой синтаксис, где task не используется. Только функции с подключением в вотчер и экспорт.

вот пример

function styles() {
	return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`])
		.pipe(eval(`${preprocessor}glob`)())
		.pipe(eval(preprocessor)({'include css': true,  use: axis()}))
		.pipe(dest('app/css'))
		.pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
		.pipe(cleancss({ level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
		.pipe(rename({ suffix: ".min" }))
		.pipe(dest('app/css'))
		.pipe(browserSync.stream())
}

а, во-вторых, , я так понимаю, в параметрах ( 'path-to-your-folder ) нужно указывать папку исходную(src) ?. Если так, то куда прописывать путь компилированных файлов? В options таких парметров нет...

[Brendan Castaneda]

lorentso, Вы должны предоставить мне больше информации о вашем gulpfile.js я не смогу переписать его под вас опираясь только на тот код который вы предоставили.
Мне нужно то как подключается ваш gulp, нужно то как вы запускаете его если это не task, может это exports.stream = series()
По сути просто нужно подставить код примера с сайта Smart-Grid в свой gulpfile.js

Может быть так вот, я не могу точно знать этого, не видя ваш gulpfile.js

const { src, dest, series} = require('gulp')
const smartGrid = require('smart-grid')

function styles() {
    const options = {
        /* your grid settings here */
    };
    return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`])
        .pipe(eval(`${preprocessor}glob`)())
        .pipe(eval(preprocessor)({ 'include css': true, use: axis() }))
        .pipe(dest('app/css'))
        .pipe(smartGrid('path-to-your-folder', options)) // <=====
        .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
        .pipe(cleancss({ level: { 1: { specialComments: 0 } }, /* format: 'beautify' */ }))
        .pipe(rename({ suffix: ".min" }))
        .pipe(dest('app/css'))
        .pipe(browserSync.stream())
}

exports.build = series(styles)

[lorentso]

Brendan Castaneda, я уже именно так делал(подключал через .pipe ), и у меня не вышло, но..

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

в конце-концов, я сделал так -- просто подключил SmartGrid по образцу ( как подключенны все остальные функции), прописав ее везде, где нужно.

приводить код, возможно не актуально, но на всякий случай напишу, может новичку, у которого в его gulpfil -e он тоже усложнен, это пригодится.

сначала я написал функцию

function grid(done){
   smartGrid('path-to-your-folder', options);
   done();
}

строку с task проигнорировал.

а затем прописал ее везде , где прописаны все остальные

exports.grid      = grid
exports.pugToHtml = pugToHtml
exports.scripts = scripts
exports.styles  = styles
exports.images  = images
exports.deploy  = deploy
exports.assets  = series(scripts, pugToHtml, styles, images, grid)
exports.build   = series(cleandist, scripts, styles, images, grid pugToHtml, buildcopy, buildhtml)
exports.default = series(scripts, styles, pugToHtml, images, grid, parallel(browsersync, startwatch))

И у меня все работает!
..Хотя, сомневаюсь, что в функции buil она вообще нужна, но это уже детали

Сейчас уже думаю использовать smartGrid в другом варианте, который тоже приведен на сайте -- то есть, сделать так, чтобы сетка обновлялась на лету при каждом изменении параметров, и не требовала презапуска gulp-а.

Вам спасибо! Вы смотивировал меня попробовать еще раз.

[Brendan Castaneda]

lorentso, Это отлично!
Но я не понимаю одно, зачем вы прописали столько экспортов в конце файла?
Вам по идее нужно всего несколько.
Например:

exports.stream = series(clear, fontConverter, html, scss, stream)

1) Для запуска при разработке, в режиме реального времени, что-бы на лету изменения применялись.
2) Для обычной сборки проекта, без запуска browserSync.

Вы создали отдельную функцию для запуска smartGrid и я считаю, что возможно это не удобно.
Может быть обработку файлов нужно производить где-то между другими задачами, допустим до минификации файла. Я-бы плпытался-бы запилить его в ту функцию для стилей всё-же.
Вы можете положить код вашей функции smartGrid вот в такую функцию .on('data', function(file) { your code... }) а эту функцию поместить между другими .pipe() задачами в вашу функцию style.