Как сжимать и конкатенировать js-файлы с помощью gulp?
Собственно. Не знаю, с какой стороны подойти.
Как было по старинке: мы создаем js-файлики и подключаем их либо в общий шаблон, либо где нужно, самостоятельно следя за порядком их подключения, что бы не было ошибок. Потом перед деплоем сами и конкатенируем в нужном порядке, сжимаем, добавляем нужную версию, что бы не было проблем с кэшированием.
А как это делать по современному, что бы максимально всё автоматизировать?
Вот висит вотчер gulpa, следит за coffee-скриптами, своевременно компилит их и кладет в папочку js.
Просто смотрел, есть такие штуки как require.js, browserify - они вроде бы сами умеют на лету подгружать нужные файлы, а потом, когда будем билдится сами проследят за зависимостями и склеют всё в правильном порядке. Я правильно понял? Только не понятно мне, как они работают и куда их прицепить.
Расскажите, как у вас простроены процессы с gulpом (ну или gruntом) и что мне сделать, что бы всё было хорошо?
Сервер на django. Во фронтэнде - coffeescript, angular, jquery, bootstrap.js.
Задача AMD/CommonJS (require.js и browserify соответственно) - разруливать зависимости а не динамически скрипты подгружать.
Подключение скриптов - gulp-inject + main-bower-files
Обработка скриптов - gulp-concat + gulp-uglify + gulp-sourcemaps (без сорсмэпов никуда)
Обработка стилей - gulp-less (или scss тут как хотите) + gulp-autoprefixer + gulp-sourcemaps
Таски которые обычно есть: build (подготовка к продакшену) и server (пребилдит приложение для разработки и запускает ватчеры).
Есть масса статей с описанием разных подходов. Есть всякие бойлерплейты и сиды. Есть yoman в конце концов с кучей генераторов.
@Rrooom: при продакшене не нужно их сносить, просто сделайте отдельный таск для сборки под продакшен или воспользуйтесь gulp-if.
Что до нужного порядка - раз уж у вас и так все пересобирается постоянно, можно воспользоваться browserify + gulp-remember и gulp-cache для инкрементной сборки.
А main-bower-files берет все зависимости от библиотек котоыре у вас в bower.json прописаны и выстраивает их в нужном порядке. Я так подключаю angular и модули для оного.
@Miraage: к хорошему быстро привыкаешь. На небольших проектах пофигу, а на больших (10К+ строк кода в выходном файле) искать что-то довольно проблематично. Скажем так, добавить сорсмэпы труда не составит, зато очень удобно.
