Serj-One

В самом OpenCart и завис. Сбрось кэш и отключи кэширование.

"devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-csso": "^2.0.0",
    "gulp-newer": "^1.3.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^3.1.0",
    "gulp-tinypng": "^1.0.2",
    "gulp-uglify": "^2.0.1",
    "gulp-watch": "^4.3.11"
  }

В зависимости от проекта список может расширятся, но костяк таков.

Что мешает переименовать после компиляции?
https://www.npmjs.com/package/gulp-rename
extname = ".tpl"

Обновляется min, потому что ты сохраняешь только min.

gulp.task('default', function() {
    return gulp.src('css/*.css')
        .pipe(concat('all.css'))
        .pipe(gulp.dest('dist/css/'));
        .pipe(minifyCSS())
        .pipe(rename('all.min.css'))
        .pipe(gulp.dest('dist/css/'));
});

Удобней указывать отслеживаемые файлы в конфиге BS

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "dev"
        },
        files: ["dev/js/*.js", "dev/*.html", "dev/*.php", "dev/css/*.css"]
    });
});

А browserSync.reload(); из всех watch вообще убрать.

gulp-watch

Для png и jpg лучший вариант - gulp-tinypng, работающий через api tinypng. По качеству он на порядок превосходит всех конкурентов. Бесплатно 500 изображений в месяц, больше - $0.009 за изображение.
В качестве альтернативы есть kraken. ($9 за 2GB), качество чуть ниже, но тоже отличное.
Полностью локальные решения от их качества далеки безумно. Но если рассматривать такие варианты - иногда использую gulp-image-optimization, это немного переработанный всем известный gulp-imagemin.

По поводу

не копирует/оптимизирует не одно изображение

Дело не в плагинах. Вероятно, это вы что-то делаете не так.

Стандартный watch добавление файлов не отслеживает.
Но есть плагин gulp-watch, который это умеет.

gulp.task('scss', function () {
    gulp.src( ['dev/_scss/*.scss',] )       
        .pipe(concat('style.scss'))
        .pipe(sass())    
        .pipe(gulp.dest('dev/css/'))
});

csso

Кусок моего галпфайла. Что-то снабдил комментами.

var connect      = require('browser-sync'); // livereload
var sass         = require('gulp-sass'); // Кому что, я использую SCSS
var csscomb      = require('gulp-csscomb'); // Обязательно!
var cssmin       = require('gulp-cssmin');
var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
var concat       = require('gulp-concat');
var uglify       = require('gulp-uglify');
var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
var autoprefixer = require('gulp-autoprefixer');
var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
var spritesmith  = require('gulp.spritesmith'); // Спрайты
var notify       = require('gulp-notify'); // Уведомления
var merge        = require('merge-stream'); // Деление таска на разные потоки

Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.