Использование 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']);
Удачи!
Комментарии
Пока нет комментариев
Оставить комментарий