Сергей delphinpro

можно ли с ними работать в gulp-sass как с обычными .sass файлами?

Обычные - это как раз .scss-файлы. А .sass - устаревший синтаксис для извращенцев.

.pipe(sourcemaps.write())

Вы же карту исходников прямо в файл пишете. Конечно размер будет огромным.

Напишите хотя бы так, чтобы сорсмап записывался в отдельный файл рядом с css
.pipe(sourcemaps.write('.'))

вотчер висит, например

Определенно, ваш код больше соответствует "best practic".

1. У вас есть вотчер, у товарища его нет. Какой у него тогда смысл запускать браузер-синк? =))
   
2. У товарища нет дефолтной задачи.
   
3. При этом товарищ более правильно использует браузер-синк browserSync = require('browser-sync').create(); - через создание объекта. Хотя на практике я разницы не вижу и сам использую простой реквайр без криэйт.
   
4. У обоих есть косяк - отсутствует обработка ошибок. Если в sass/stylus файле будет синтаксическая ошибка всё упадет и нужно будет перезапускать.
   
5. Ну у вас оформлено поаккуратнее еще ))
   

В остальном - одинаково. Вас наверное смущает использование другого синтаксиса для browser-sync? Просто почитайте доку и узнайте как правильно использовать.

Добавь еще в конце
gulp.task('default', ['watch']);

Для автоматизации используйте плагин https://github.com/imagemin/imagemin-jpegtran с опцией progressive:true

UPD
Я как-то не особо заморачивался в данном аспекте оптимизации, но ваш вопрос сподвиг-таки меня на доработку своего таска. В итоге прогрессивный режим работает и таск выглядит вот так сейчас

var imagesTask = function () {
    return gulp.src([paths.src])
        .pipe(changed(paths.build))
        .pipe(imagemin([
            imagemin.gifsicle(),// default
            imagemin.jpegtran({
                progressive: true
            }),
            imagemin.optipng(),// default
            imagemin.svgo()// default
        ]))
        .pipe(gulp.dest(paths.build))
        .pipe(browserSync.stream())
};

https://github.com/delphinpro/gulp-starter/blob/ma...

Вариант 1

"devDependencies": {
    "browser-sync": "^2.17.1",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "*",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-data": "^1.2.1",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-twig": "^0.5.0",
    "gulp-uglify": "^2.0.0",
    "require-dir": "^0.3.1"
  }

Вариант 2

"devDependencies": {
    "autoprefixer": "^6.5.3",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.26.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-util": "^3.0.7",
    "node-sass": "^3.13.0",
    "require-dir": "^0.3.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-stream": "^3.2.0"
  },

При чем здесь галп? хотите редактировать в браузере - используйте лайфстайл, какие проблемы-то...

Кто-то в 2017-ом еще верстает на голом html/css без доп инструментов?

Gulp - наш выбор.

Значения по умолчанию:
$variableOne: 100px !default;

Node.js как то хитро обрабатывает пути и не позволяет указывать их напрямую, а только относительно папки с проектом

Кто вам сказал эту ересь?

return gulp.src(paths.src)
        .pipe(data(getData))
        .on('error', handleErrors)
        .pipe(twig({
            base     : [path.join(config.root.src, config.twig.src)],
            functions: functions
        }))
        .on('error', handleErrors)
        .pipe(changed({firstPass: true}))
        .pipe(gulp.dest(paths.build)) // билдим в проект (он у меня на диске D:\)
        .pipe(gulp.dest('e:/123')) // Дополнительно копируем на диск E:\
        .pipe(browserSync.stream());

следить нужно за .jade файлами

он может следить за локальными файлами, а обновлять может любую страницу, ему пофиг.
ну точнее, следит за файлами не он. в общем вы поняли.

3. Просто передача параметров в плагин
4, просто два разных пакета

для строго очередного запуска попробуйте gulp-sequence

var gulpSequence = require('gulp-sequence');
var defaultTask = function (cb) {
    gulpSequence(['task1', 'task2'], ['task3', 'task4'], 'watch', cb);
};

task1 и task2 запустятся параллельно
task3 и task4 тоже
но сначала выполнится 1 и 2, потом 3 и 4, потом watch

надо будет опять лесть в исходники, править, пересобирать и заливать на сервер?

бинго!

Иначе говоря, последовательность действий, при создании нового проекта, при этом используя свой уже наработанный gulp-пак.

наработанный пак - это буквально два файла (основные) gulpfile.js и package.json. Берем их в новый проект, npm i и поехали. Иногда галп-таски пишут в отдельных файлах, особенно когда их много, в этом случае нужно тащить в новый проект всю папку с такими файлами. Ну и, опционально, остальные ваши файлы с какими-то наработками.

Что нужно чтобы использовать gulp - сборки от других пользователей, например с GitHub?
Я имею ввиду, что конкретно скачивать (перекидывать из папки в папку) и прописывать.

зачем вручную скачивать-то?

git clone https://github.com/vendorName/packageName.git .

Сделал две кнопки на тулбаре коммандера
Первая клонирует репу со сконфигурированным гальпом:

Вторая создает симлинк на папку с модулями в текущем проекте

runas /env /user:Администратор "D:\OpenServer\domains\frontend\runas_mklink_gulp-starter.bat"

Содержимое батника

@echo off
mklink /D node_modules e:\YandexDisk\domains\frontend\gulp-starter\node_modules

В папке e:\YandexDisk\domains\frontend\gulp-starter\node_modules предустановленные модули для вышеозначенной репы

Жму одну кнопку, жму вторую, и типовой проект для верстки развернут. Запускаем галп и работаем. Полминуты на всё.

Вот так это выглядит:

1) да. это набор js-скриптов, которые выполняются в среде node.js
2) да, но зачем, когда проще скопировать package.json и выполнить npm install?