Показать сообщение отдельно
  #2 (permalink)  
Старый 01.03.2017, 15:58
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Определился со структурой.
Решил разбивать все максимально подробно. Не для каждого проекта это потребуется, но зато упростить потом смогу и сам, а вот с расширенной структурой есть ряд вопросов.

Начну со стилей.

Структура проекта в папке /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?

Последний раз редактировалось spo, 01.03.2017 в 16:03.
Ответить с цитированием