Как правильно задать путь и параметры?

Question

[Andrej Sharapov]

Здравствуйте!
Подскажите, как решить три проблемы:

1. Поставил автопрефикс, но не пойму как работает. При выгрузке из scss в css все остается без префиксов.
Пока приходится использовать миксин.

@mixin bShad($box) {
  -webkit-box-shadow: $box;
  -moz-box-shadow: $box;
  box-shadow: $box;
}

2. Есть папка: проект/app/scss/source/ в ней три файла.scss
Надо, чтобы они собрались в один css файл: проект/dist/css/main.css (если я правильно понял, он появится сам). Поставил gulp-concat-css, но у меня почему-то просто переносятся все три файла с тем же путем и содержимым, хотя файлы css.

Подскажите, как правильно задать путь? Вот весь код gulpfile.js

var gulp 		     = require('gulp'),
	sass 	     = require('gulp-sass'),
	concat          = require('gulp-concat-css'),
	autoprefixer = require('gulp-autoprefixer');

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

gulp.task('watch', function() {
	gulp.watch('app/**/*.scss', ['sass']);	
});
 
gulp.task('default', () =>
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

gulp.task('default', function () {
 return gulp.src('app/**/**/*.scss')
   .pipe(concatCss("main.css"))
   .pipe(gulp.dest('app/css/main.css'));
});

3. Если в пакете.json я указал, что у меня подключен репозиторий, в нем потом вручную надо создавать все файлы, или они как-то там тоже должны появиться?

Answer 1

[Сергей]

Всё можно сделать в одной задаче:

gulp.task('sass', function() {
  return gulp.src('app/**/*.scss') // получаем файлы из указанной директории
    .pipe(sass()) // компилируем sass в css
    .pipe(autoprefixer({ // добавляем вендорные префиксы
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concat("main.css")) // объединяем файлы в потоке в один с указанным именем
    .pipe(gulp.dest('dist')); // выгружаем в папку dist
});

В настройках автопрефиксера указано: last 2 versions. Сомневаюсь, что последние версии браузеров ещё требуют префиксы для теней. Впрочем, можно посмотреть и убедиться в этом самому https://caniuse.com. Для проверки автопрефиксира попробуй какие-то сравнительно новые свойства, например, display: flex.

Comments

[Andrej Sharapov]

теперь конкат не работает)) "concatCss is not defined"

var gulp         = require('gulp'),
	sass         = require('gulp-sass'),
	concat       = require('gulp-concat-css'),
	autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
  return gulp.src('app/**/*.scss') // получаем файлы из указанной директории
    .pipe(sass()) // компилируем sass в css
    .pipe(autoprefixer({ // добавляем вендорные префиксы
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concatCss("main.css")) // объединяем файлы в потоке в один с указанным именем
    .pipe(gulp.dest('app/css')); // выгружаем в папку dist
});

А что по другим вопросам?

[Сергей]

Отредактировал код выше, вы объявляете переменную concat, а в задаче используете concatCss, из-за этого и проблема.
Насчёт package.json не совсем понял вопрос. Вы ставите gulp-плагины, они автоматически прописываются в package.json. Когда вы определитесь со своей gulp-сборкой, можно будет использовать этот файл для быстрого скачивания пакетов. Просто перемещаете package.json в папку с новым проектом и запускаете в командной строке npm install, все плагины, перечисленные в этом файле, автоматически установятся в папку node_modules. Если нужно обновить плагины, запускаем в консоли команду npm update (при этом обновится и сам package.json).

[Andrej Sharapov]

Сергей, спасибо. Получилось так. Думаю, это финальный комплект:

var gulp = require('gulp'),
	sass = require('gulp-sass'), //Подключаем Sass пакет
	concat = require('gulp-concat-css'), // Подключаем gulp-concat 
	cssnano  = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
	autoprefixer = require('gulp-autoprefixer'); // Подключаем автопрефиксы

gulp.task('sass', function() {
  return gulp.src('app/**/*.scss') // получаем файлы из указанной директории
    .pipe(sass()) // компилируем sass в css
    .pipe(autoprefixer({ // добавляем вендорные префиксы
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concat("main.css")) // объединяем файлы в потоке в один с указанным именем
    .pipe(gulp.dest('dist')); // выгружаем в папку dist
});

3. Я имею ввиду другое. Как связан репозиторий, который я указал в пакете при создании, с тем, что я делаю? Зачем его вообще там указывать? Я думал, что там будут появляться файлы, которые я создаю, но судя по всему, мне их просто надо будет перенести в проект на гитхаб руками.

И еще вопрос. Подключил cssnano для минификации, как сделать, чтобы он создавал мин файл?

[Сергей]

Таких тонкостей я не знаю, с git ещё не работал, но существует плагин gulp-gh-pages, который автоматизирует и этот процесс.

[Andrej Sharapov]

Сергей, Спасибо за помощь. Как получше научусь работать с ггалпом и нпм, попробую и его.