Илья Бельский

Если используется Ruby Sass, то рекомендую заменить на libsass.
sass = require('gulp-sass')

как делаю я:

каждый файл обрабатывается отдельно (то есть, в gulp.src у меня отправляется глоб-путь)
1. кеширую каждый файл - gulp-cached
2. с помощью gulp-insert добавляю в начало каждого файла строку "@import "+pathToVarsScss+";\n", где pathToVarsScss это файл, в котором собраны все миксины, переменные, что-угодно-еще, которые необходимы для компиляции каждого файла в отдельности
3. собственно, компилирую в css
4. postcss, любая обработка
5. работает gulp-remember, возвращая в поток все то, что убрал оттуда gulp-cached
6. gulp-concat

7. PROFIT!!!

результат: время сборки сокращается в десятки раз

ЗЫ: в начале и конце прикрутите сорсмапы
ЗЗЫ: csso наверняка будет долгим, минифицируйте только на продакшн сборку

Решение нашел )
вот что делал для osx
1) Качаем архив ngrok
2) кидаем бинарник в приложения и делаем symlink

cd /usr/local/bin 
# create symlink 
ln -s /Applications/ngrok ngrok

3) проверяем работу
ngrok -h
запускаем тестовый
ngrok http 8080
у него есть своя консоль - 127.0.0.1:4040
можн запускать с параметрами из файла, он должен лежать тут

~/.ngrok2/ngrok.ymlD

4) Ставим ngrok из npm
npm install ngrok -g

и настраиваем gulp
Вот кусок из gulpfile

.....
var  ngrok = require('ngrok'), //замена localtunnel, inspector => http://127.0.0.1:4040 
.....
var config = {
    server: {
        baseDir: "./build"
    },
    //tunnel: true,
    host: 'localhost',
    port: 1984,
    directoryListing: true,
    logPrefix: ''
};

gulp.task('webserver', function () {
    //browserSync(config);
    browserSync(config, function (err, bs) {
       ngrok.connect({
                proto: 'http', // http|tcp|tls 
                addr: bs.options.get('port'), // port or network address 
            }, function (err, url) { 
                gutil.log('[ngrok]', ' => ', gutil.colors.magenta.underline(url));
            });         
    });         
});

На винде вроде бы так было:

cd C:\Program Files\Sublime Text 3\Data\
mklink /D "Installed Packages" "C:\Dropbox\work\Sublime Text 3\Data\Installed Packages"
mklink /D "Packages" "C:\Dropbox\work\SublimeText 3\Data\Packages"
mklink /D "Pristine Packages" "C:\Dropbox\work\Sublime Text 3\Data\Pristine Packages"

(открываешь консоль, переходишь в папку, вбиваешь команды со своими путями)

Вот код:

<script>
function slideup(){
   t = document.querySelector(".slide");
   t.scrollTop -= t.offsetHeight;
}

function slidedown(){
   t = document.querySelector(".slide");
   t.scrollTop += t.offsetHeight;
}
</script>

<i class="icon icon-up" onclick="slideup()"></i>
<div class="slider" style="overflow-y: auto">
   ...
</div>
<i class="icon icon-down" onclick="slidedown()"></i>

С анимацией думаю сможете разобраться

bxslider.com
классная библиотека. Есть куча примеров.

Гуглить по запросу "вертикальный слайдер". Будет масса вариантов.

Не вижу причины писать следующее к примеру так.pipe(plugins.rigger()), можно ведь так: .pipe(rigger()), возможно это не даст ускорения, но будет правильно

возможно, стоит попробовать sass() вместо sass.sync(), убрать промежуточный gulp.dest (правда, зачем?) и csso() на время разработки?
вообще, вылючайте плагины по очереди и увидите, какой из них тормозит сборку

нужно исполйзовать https://www.npmjs.com/package/gulp-newer

Я например делаю так: мой таск (как пример) с использованием main-bower-files

gulp.task('styles:vendor', function() {
  gulp.src(mainBowerFiles({
          "overrides": {
              "normalize.css": {
                  "main": "./normalize.css"
              },

              "magnific-popup": {
                  "main": "./dist/magnific-popup.css"
              },

              "slick-carousel": {
                  "main": [
                      "./slick/slick.css",
                      "./slick/slick-theme.css",
                      "./slick/fonts/*.*"
                  ]
              }
          }
  }))
  .pipe(cssFilter)
  .pipe(concat('vendor.css'))
  .pipe(gulpIf(env !== 'dev', minifyCSS()))
  .pipe(gulp.dest(outputDir + 'css'))
});

и если понимаете принципы работы gulp, то дальше вам все должно быть понятно. В индексе у меня два файла стиля: main.css и vendor.css, аналогичная ситуация и с js.

Использую wiredep , позволяет вытягивать все, что установлено с помощью bower + gulp-useref, для того чтобы вытянуть все в dist (релиз).

к примеру подключение стилей в index.html в исходной папке app, выглядит так

<!-- build:css css/vendor.css -->
		<!-- bower:css -->
		<!-- endbower -->
	<!-- endbuild -->

А на выходе в index.html в релизной папке dist получится такое
<link rel="stylesheet" href="css/vendor.css">
Описание подключения в gulpfile.js есть, не должно составить труда ...

.pipe(wiredep())
.pipe(useref())

Посмотрите это например - https://github.com/garethflowers/vscode-portable

Фотошоп в мире разработки - это, однозначно, webStorm\phpStorm\pyCharm\(смотря какой язык используете)
netbeans еще не плох, но не дотягивает до уровня продуктов jetbrains (хотя бесплатность может стать решающим плюсом при выборе)

WebStorm, PhpStorm.
Вообще это одно и то же (просто у PhpStorm еще и встроенная поддержка PHP с кучей фич).

Лично я сижу на WebStorm (у меня бесплатная лицензия). Лучшая IDE в мире.