Как правильно собирать CSS файл в Gulp, включая установленные через NPM файлы?

Question

[Дмитрий]

Всем привет.
Начал осваивать Gulp, чтобы удобнее работать с вёрсткой и столкнулся с банальной проблемой. Например, я ставлю через NPM плагин normalize.css. В папке /node_modules появляется соответствующая директория, там лежит файл normalize.css.
Как его правильно присоединить к своему проекту? Копировать в папку с проектом или прописывать абсолютный путь кажется неудобным и, скорее всего, это неправильно.
Это же относится ко всем CSS-фрэймоворкам, которые ставятся через NPM и которые нужно прицепить к проекту.

На тостере нашёл информацию о includePaths: с примером, попробовал использовать его в Gulp-таске:

gulp.task('sass', function() {
	return gulp.src('app/sass/*.scss')
	.pipe(sass( {
		includePaths: require('normalize.css')
	}))
	.pipe(gulp.dest('app/css'))
});

И в редактируемый .SCSS вставил строчку для импорта:
@import 'normalize.css';
Но консоль отдаёт ошибку:

C:\Users\USER\Desktop\_project\node_modules\normalize.css\normalize.css:12
html {
     ^
SyntaxError: Unexpected token {

Как правильно "вытаскивать" CSS-файлы из установленных пакетов, и компилировать в один файл, вместе со своими стилями проекта?
Это относится и к normalize, и к любому CSS-фрэймворку, например, если нужно будет подключить Bootstrap.

Comments

[dummyman]

И в редактируемый .SCSS вставил строчку для импорта:
Dmitrijs Balcers 'normalize.css';
Но консоль отдаёт ошибку:

C:\Users\USER\Desktop\_project\node_modules\normalize.css\normalize.css:12
html {
^
SyntaxError: Unexpected token {

В синтаксисе SASS нет фигурных скобок

[Дмитрий]

Артём Петренков: действительно, затупил. Заменил точно также, как и в примере - всё свелось при выполнении таска в единый файл вместе с normalize без ошибок.

Answer 1

[Дмитрий]

Разобрался. По части normalize.css была ошибка в строке с IncludePaths, правильный вариант здесь.

Касательно части вопроса по подключению фрэймворков - это всё решает Bower, через него можно устанавливать разные библиотеки. Информация есть в уроке "Gulp для самых маленьких", про Bower объясняют с ~53 минуты.

Answer 2

[monochromer]

gulp.task('sass', function() {
  return gulp.src('app/sass/*.scss')
  .pipe(sass({
    includePaths: ['./node_modules']
  }))
  .pipe(gulp.dest('app/css'))
});

@import 'normalize.css/normalize.css';