Использование Gulp. Часть 5 - cборка скриптов.

Объединение и минифакция js-файлов.
Мы экспериментируем с Gulp на примере Okay CMS. Давайте для наглядности разобьем скрипт okay.js на несколько скриптов.
В папке src создаем папку для скриптов с назаванием js, а внутри нее создаем 2 файла main.js и theme.js.
Перенесем из файла okay.js в main.js код, который мы практически никогда не меняем при создании нового шаблона: аяксовую корзину, смену варианта, количество товара, купоны и т.д., а в файл theme.js перенесем скрипты, которые часто приходится менять в зависимости от шаблона, например, скрипты для баннеров и скролла.

Сам файл okay.js удаляем, теперь он будет созаваться автоматически средствами gulp.
В index.tpl он у нас подключен, так что никаких изменений в индексном файле делать не будем.

Плагин gulp-uglify
В работе с js-файлами нам подойдут плагины, которые мы задействовали для стилей, вот только для минификации js-файлов используем плагин gulp-uglify
https://www.npmjs.com/package/gulp-uglify

Установим его:
npm install --save-dev gulp-uglify

В gulpfile.js добавим переменную uglify = require('gulp-uglify') в секцию require и затем запишем код для скриптов, аналогичный коду, который мы создавали для css. Весь код:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    gulpif = require('gulp-if'),
    argv = require('yargs').argv,
    debug = require('gulp-debug'),
    uglify = require('gulp-uglify');

var config = {
    srcDir: './src',
    stylePattern: '/**/*.+(scss|css)'
};

var app = {};

app.addStyle = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(debug({title: 'sass:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'concat:'}))
    .pipe(gulpif(argv.prod, cleanCSS()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
};

app.addScript = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(sourcemaps.init())
    .pipe(debug({title: 'js:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'jsconcat:'}))
    .pipe(gulpif(argv.prod, uglify()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/js'));
};

gulp.task('styles', function() {
    app.addStyle([
        config.srcDir+'/css/normalize.css',
        config.srcDir+'/css/autocomplete.css',
        config.srcDir+'/css/ui-slider.css',
        config.srcDir+'/css/fancybox.css',
        config.srcDir+'/css/slick_slider.css',
        config.srcDir+'/css/common.css',
        config.srcDir+'/sass/style.scss',
        config.srcDir+'/sass/responsive.scss'
    ], 'main.css');
    app.addStyle([
        config.srcDir+'/sass/compare.scss'
    ], 'compare.css');
});

gulp.task('scripts', function() {
    app.addScript([
        config.srcDir+'/js/main.js',
        config.srcDir+'/js/theme.js'
    ], 'okay.js');
});

gulp.task('watch', function () {
    gulp.watch(config.srcDir+'/'+config.stylePattern, ['styles']);
    gulp.watch(config.srcDir+'/js/**/*.js', ['scripts']);
});

gulp.task('default', ['styles', 'scripts', 'watch']);

Запускаем gulp

В папке design/okay_shop/js появился файл okay.js и карта к нему okay.js.map.

Запускаем gulp --prod - минифицированная версия стилей и скриптов.

Помните, мы сделали одельный файл стилей для страницы сравнения? Давайте теперь для нее сделаем и отдельный скрипт.

Создаем в src новый файл - compare.js и переносим код для слайдера сравнения, формирования ровных строчек характеристик, вобщем все, что используем для страницы сравнения.
Подключим его в index.tpl

{if $module == 'ComparisonView'}
    <link href="design/{$settings->theme|escape}/css/compare.css" rel="stylesheet" />
    <script src="design/{$settings->theme}/js/compare.js"></script>
{/if}

и немного изменим задачу для скриптов:

gulp.task('scripts', function() {
    app.addScript([
        config.srcDir+'/js/main.js',
        config.srcDir+'/js/theme.js'
    ], 'okay.js');
    app.addScript([
        config.srcDir+'/js/compare.js'
    ], 'compare.js');
});

Проверяем, перезапустив gulp. Файлы созданы. Смотрим в браузере - проверяем, правильно нам указывают строки для правки кода. Все окей.

Плагин Plumber
Рассмотрим еще один замечательный плагин gulp-plumber, который предотвращает прерывание потока в случае какой-то ошибки. 
https://www.npmjs.com/package/gulp-plumber

npm install --save-dev gulp-plumber

var plumber = require('gulp-plumber');

и в коде сразу после gulp.src как для стилей, так и для скрипров, вставляем
.pipe(plumber())

Плагин gulp-notify
Использовать plumber будем в паре с плагином gulp-notify, который будет информировать нас о найденных ошибках
https://www.npmjs.com/package/gulp-notify

npm install gulp-notify

К сожалению, на Windows в этом плагине я не смогла вывести значки и звуки для оповещения. Если у вас получится - пишите в комментариях. 
Для звуков я подключила плагин  beepbeep (https://www.npmjs.com/package/beepbeep):
npm install beepbeep. Я буду выводить звук beep 2 раза для стилей (и 1 раз для скриптов, но другим способом - об этом ниже)
Выводить ошибки в CSS будем с помощью переменной

var onError = function(err) {
    notify.onError({
    title:    "Error in " + err.plugin,
    message: err.message
    })(err);
    beep(2);
    this.emit('end');
};

Теперь уберем вывод ошибки в пайпе sass и внесем небольшие изменение в палп plumber:

.pipe(plumber({ errorHandler: onError }))

Плагин gulp-jshint
Для более информативного отображения ошибок в скриптах ставим плагин gulp-jshint, включив в него reporter (это выглядит симпатичнее в командной консоли), к тому же в нем есть возможности вывести звук beep:

.pipe( jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}))

Итоговый код в gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    gulpif = require('gulp-if'),
    argv = require('yargs').argv,
    debug = require('gulp-debug'),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber'),
    notify = require('gulp-notify'),
    beep = require('beepbeep'),
    jshint = require('gulp-jshint');
 
var config = {
    srcDir: './src',
    stylePattern: '/**/*.+(scss|css)'
};
 
var app = {};

var onError = function(err) {
    notify.onError({
        title:    "Error in " + err.plugin,
        message: err.message
    })(err);
    beep(2);
    this.emit('end');
};
 
app.addStyle = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(plumber({ errorHandler: onError }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(debug({title: 'sass:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'concat:'}))
    .pipe(gulpif(argv.prod, cleanCSS()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
};
 
app.addScript = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(plumber())
    .pipe( jshint())
    .pipe(jshint.reporter('jshint-stylish', {beep: true}))
    .pipe(sourcemaps.init())
    .pipe(debug({title: 'js:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'jsconcat:'}))
    .pipe(gulpif(argv.prod, uglify()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/js'));
};
 
gulp.task('styles', function() {
    app.addStyle([
        config.srcDir+'/css/normalize.css',
        config.srcDir+'/css/autocomplete.css',
        config.srcDir+'/css/ui-slider.css',
        config.srcDir+'/css/fancybox.css',
        config.srcDir+'/css/slick_slider.css',
        config.srcDir+'/css/common.css',
        config.srcDir+'/sass/style.scss',
        config.srcDir+'/sass/responsive.scss'
    ], 'main.css');
    app.addStyle([
        config.srcDir+'/sass/compare.scss'
    ], 'compare.css');
});
 
gulp.task('scripts', function() {
    app.addScript([
    config.srcDir+'/js/main.js',
    config.srcDir+'/js/theme.js'
    ], 'okay.js');
    app.addScript([
    config.srcDir+'/js/compare.js'
    ], 'compare.js');
});
 
gulp.task('watch', function () {
    gulp.watch(config.srcDir+'/'+config.stylePattern, ['styles']);
    gulp.watch(config.srcDir+'/js/**/*.js', ['scripts']);
});
 
gulp.task('default', ['styles', 'scripts', 'watch']);

Удачи!