GULP - Как реализовать сборку

[SlavetZ]

О себе: только начинаю курить тему про node и gulp... никогда не пользовался всякими штуками типа jade и т.п.

Я не прошу писать за меня код - прошу подсказать плагины/модули для gulp. Дальше сам разберусь

Есть проект с определенной структурой:
|-js/
|-сss/
|-media/ -картинки видео и т.п.
|-index_01.html
|-index_02.html
|-index_03.html

в каждом из html файлов подключены разные js и css файлы

задача:
1. положить каждый html файл в свою папку с именем 01, 02 и тд...
2. создать подпапки для js и css файлов и положить их туда,
3. создать подпапку media в которой будут лежать только те файлы, которые упоминаются в конкретном html файле или его js/css файлах (при необходимости поправить пути)
4. добавить в каждую папку 01, 02 и тд txt файл с описанием взятым из из массива или объекта
5. сложить все в папку dist/01... 02 и тд
6. зазиповать папки 01... 02 и тд (зипы положить рядом)

должно получиться:
01
|-js/
|-сss/
|-media/ -картинки видео и т.п.
|-index.html
|-sample.txt
02
|-js/
|-сss/
|-media/ -картинки видео и т.п.
|-index.html
|-sample.txt
...

как вижу реализацию:
1. можно через FS прочитать все файлы корня и для каждого имени с .html запустить функцию/таск с gulp.src('index_01.htm') и т.д.
2. думаю можно использовать gulp-useref предварительно разметив исходные index_01.html и т.п. файлы
3. хз чем проанализировать html, css, js файлы на наличие ссылок на media-файлы
4. здесь я полагаю нужно использовать метод FS самого node читать массив и писать
5. как сделать gulp.dest('dist/01') и тд понятно...
6. видимо gulp-zip после того как пункты 1-5 выполнены

Пункты 4 и 6 наверное можно сделать отдельными тасками и выполнять после...

Я не стал писать про всякие минификаторы и оптимизаторы типа gulp-autoprefixer - но конечно они будут...

Так-же интересует можно ли содержимое body моих html обернуть в div c определенными свойствами и т.п.

Буду очень рад если поможете советом.

[Coriolan161]

SlavetZ,
1. А если у тебя 50 .html ты тоже собрался вручную прописывать gulp.src для каждого?
По путям и ссылкам посмотри и попробуй вот эти фигни:
https://www.npmjs.com/package/gulp-search
https://github.com/cgross/gulp-dom-src
https://www.npmjs.com/package/gulp-html-src

2. это какой-то копипаст? или подпапки должны быть в папках c .html?
3. подпапка media там же валяется?
4. уточняй, что за объект или массив
5. ну понятно тебе вроде
6. аналогично


На будущее, чтобы не обкакаться с левыми плагинами
https://github.com/gulpjs/plugins/bl...blackList.json

[SlavetZ]

SlavetZ,
1. А если у тебя 50 .html ты тоже собрался вручную прописывать gulp.src для каждого?

Ну конечно нет что-то типа такого:

var gulp = require('gulp');
var fs = require('fs');
var rename = require("gulp-rename");


gulp.task('default', function() {

    fs.readdir('/mydir', function(err, files) {
        files.forEach(function (file) {
            if (file.indexOf('.html') != -1) {
                goNext(file);
            }
        });
    });

});

function goNext (file) {

    var newName = file.replace('.html','');

    return gulp.src(file)
        .pipe(rename("index.html"))
        .pipe(gulp.dest('dist/'+newName));

}

SlavetZ,
2. это какой-то копипаст? или подпапки должны быть в папках c .html?
3. подпапка media там же валяется?

Добавил наверх структуру...

SlavetZ,
https://www.npmjs.com/package/gulp-search
https://github.com/cgross/gulp-dom-src
https://www.npmjs.com/package/gulp-html-src

спасибо за ссылки

[SlavetZ]

Урра! наговнокодил и оно работает...
Ищу упоминания файлов в html-ке, потом в тех файлах которые упоминались в html-ке
и раскладываю их как нужно...
для этого использую RegExp и читаю файлы по строкам на предмет соответствия имен файлов определенным типам

Подскажите пожалуйста можно оптимизировать эту часть кода?

//Список принадлежности файлов
//Используется при gulp.dest и в создании RegExp
var imageList = ['*.png','*.gif','*.jpg','*.jpeg','*.svg'];
var cssList = ['*.css'];
var jsList = ['*.js','*.json'];
var pdfList = ['*.pdf'];
var videoList = ['*.mp4','*.ogv','*.webm'];
var fontsList = ['*.otf','*.ttf','*.woff','*.eot','*.svg'];

//Список принадлежности в строку вида png|gif|jpg|jpeg|svg для RegExp
//преобразования всех переменных однотипные... код нужно оптимизировать
var imageString = imageList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
var cssString = cssList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
var jsString = jsList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
var pdfString = pdfList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
var videoString = videoList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
var fontsString = fontsList.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');

//Базовое выражение RegExp для поиска файлов в строках
var baseReg = (/((?:((?:[^\(\\\'\"\r\n\t\f\/ ])*)\.(?:(filenames)\b)))/gim).toString().replace(/(^\/|\/gim)/gim, '');

//Выражение RegExp для поиска файлов в строках по списку принадлежности
//преобразования всех переменных однотипные... код нужно оптимизировать
var imageReg = new RegExp(baseReg.replace('filenames', imageString), 'gim');
var cssReg = new RegExp(baseReg.replace('filenames', cssString), 'gim');
var jsReg = new RegExp(baseReg.replace('filenames', jsString), 'gim');
var pdfReg = new RegExp(baseReg.replace('filenames', pdfString), 'gim');
var videoReg = new RegExp(baseReg.replace('filenames', videoString), 'gim');
var fontsReg = new RegExp(baseReg.replace('filenames', fontsString), 'gim');

[SlavetZ]

вот тупанул сделал так

//Список принадлежности файлов
//Используется при gulp.dest и в создании RegExp
var imageList = ['*.png','*.gif','*.jpg','*.jpeg','*.svg'];
var cssList = ['*.css'];
var jsList = ['*.js','*.json'];
var pdfList = ['*.pdf'];
var videoList = ['*.mp4','*.ogv','*.webm'];
var fontsList = ['*.otf','*.ttf','*.woff','*.eot','*.svg'];

//Выражение RegExp для поиска файлов в строках по списку принадлежности
var imageReg = objToRegExp(imageList);
var cssReg = objToRegExp(cssList);
var jsReg = objToRegExp(jsList);
var pdfReg = objToRegExp(pdfList);
var videoReg = objToRegExp(videoList);
var fontsReg = objToRegExp(fontsList);

function objToRegExp(obj){
    //Базовое выражение RegExp для поиска файлов в строках
    var baseReg = (/((?:((?:[^\(\\\'\"\r\n\t\f\/ ])*)\.(?:(filenames)\b)))/gim).toString().replace(/(^\/|\/gim)/gim, '');
    //Список принадлежности в строку вида png|gif|jpg|jpeg|svg для RegExp
    var string = obj.toString().replace(/(\'|\"|\*|\.)/gim, '').replace(/\,/gim, '|');
    //Выражение RegExp
    var regexp = new RegExp(baseReg.replace('filenames', string), 'gim');
    return regexp;
}