Подключение normalize.css c помощью gulp?

Question

[Иван]

Прошу помощи пожалуйста расскажите подробно как мне подключить в уже имеющийся gulpfile nozmalize.css. Через npm его установил но не могу разобраться какие изменения добавить в gulpfile для того чтобы все заработало. И если любой другой плагин захочу подключить как это сделать?

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

function style() {
	return gulp.src('./scss/**/*.scss')
		.pipe(sass())
		.pipe(gulp.dest('./css'))
		.pipe(browserSync.stream())
}


function watch() {
	browserSync.init({
		server: {
			baseDir: './'
		}
	})
	gulp.watch('./scss/**/*scss', style);
	gulp.watch('./*.html').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

Comments

[Михаил]

gulp здесь при чем? подключайте через sass

[Иван]

Михаил, А каким образом это сделать? Разве через gulp нельзя его подключить?

[Сергей delphinpro]

Михаил, официально нет этой библиотеки на sass, а подключать css sass до сих пор не умеет, насколько я знаю.
Есть сторонние варианты, и это вполне допустимо. Плюс всегда есть варик, сделать свою подключаемую либу, если имеешь дело со множеством разных проектов.

Answer 1

[raury]

Можно написать новый таск для подключения стилей из разных библиотек:
Только сначала нужно установить пакет 'gulp-concat' и подключить его

const concat = require('gulp-concat');

gulp.task('css-libs', function(){
    return gulp.src('node_modules/normalize.css/normalize.css')
        .pipe(concat('_libs.scss'))
        .pipe(gulp.dest('./scss'))
        .pipe(browserSync.reload({stream: true}))
})

Теперь, когда ты захочешь добавить еще какую-нибудь css библиотеку, то вместо строки в gulp.scr() передаешь массив.
Можешь чекнуть мою сборку https://github.com/azzztec/gulp-assemble/blob/mast...

Comments

[Сергей delphinpro]

Вот этим вариантом я обычно и пользуюсь. Все сторонние либы клею в один vendor.css/vendor.js

[Алекс Глебов]

Зачем gulp-concat, если можно заимпортить все в 1 scss файл и подключать в gulp его?
Так каждую либу придется подключать в gulp и перезапускать сборку.
css импортируется в scss если не указывать разрешение .css
Еще нужно подумать нужен вообще normalize или нет, на моих проектах из-за него время Style & Layout в google page speed увеличилось на 0.5с, что много.

Answer 2

[Михаил]

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const postcssImport = require('postcss-import');

module.exports.css = () => {
  return gulp
    .src('./scss/**/*.scss')
    .pipe(sass())
    .pipe(postcss([postcssImport()]))
    .pipe(gulp.dest('./css'));
};

@import 'normalize.css';

В любом случае будете использовать postcss, так что юзайте postcss-import