Определился со структурой.
Решил разбивать все максимально подробно. Не для каждого проекта это потребуется, но зато упростить потом смогу и сам, а вот с расширенной структурой есть ряд вопросов.
Начну со стилей.
Структура проекта в папке
/source следующая:
- /helpers
- _reset
- _vars
- _mixins
- _base
- main - содержит @import _reset, _vars, _mixins, _base
- /components
- /nav
- _media
- styles - содержит @import _media
- /page_home
- /sidebar
- _media
- styles - содержит @import _media
- /pages
- home
- _media
- styles - содержит @import _media
'use strict';
const gulp = require('gulp')
, sass = require('gulp-sass')
, sourcemaps = require('gulp-sourcemaps')
, concat = require('gulp-concat')
, autoprefixer = require('gulp-autoprefixer')
, cssnano = require('gulp-cssnano');
/* path */
const path = {
styles: {
source: {
main: './source/helpers/main.sass',
components: './source/components/**/*.sass',
pages: './source/pages/**/*.sass'
},
build: './build/css/',
}
}
/* tasks */
gulp.task('sass', function() {
return gulp.src([path.styles.source.main, path.styles.source.components, path.styles.source.pages]) // Последовательность чтения и обработки (для конкатенации в определенном порядке)
.pipe(sass()) // Компиляция кода препроцессоров
.pipe(sourcemaps.init()) // Инициализация sourcemaps
.pipe(autoprefixer({ // Обработка автопрефиксером
browsers: ['last 3 version']
}))
.pipe(cssnano()) // Минимизация
.pipe(concat('main.min.css')) // Конкатенация всех файлов в один
.pipe(sourcemaps.write()) // Запись sourcemaps
.pipe(gulp.dest(path.styles.build)); // Выгрузка в build-каталог
});
1. Из-за расширенной структуры, где стили расположены в разных местах, стоит задача объединить их в нужном порядке.
Для этого мне пришлось написать такой страшный
path и
gulp.src Нормальная ли это практика или есть более правильный способ?
2. Есть ли разница (например в производительности) в обработке файлов до конкатенации и после?
3. Нужно ли обрабатывать файлы js-плагинов (стили, скрипты) и объединять в основные файлы (
build/css/main.min.css и
build/js/scripts.min.css соответственно)? Если да, то как быть с файлами изображениями js-плагинов? Выгружать в
build/img?