Рубрика «gulp html replace»

День добрый.

Расскажу про отличный gulp плагин для сборки вашего веб приложения в один большой ассет, который может путешествовать отдельно на любой хост в удобном виде, а также если вы используете непрерывное развертывание, то можно собирать ассеты прямо в Jenkins например.

Итак сначала начнем с перечисления всех необходимых плагинов:

var gulp = require('gulp'), 
    clean = require('gulp-clean'), //для чистки папки dist
    inject = require('gulp-inject'), //этим мы будем инжектить исходники проекта поотдельности для рабаты в dev режиме
    bundle = require('gulp-bundle-assets'), //тот самый очень полезный плагин
    config = require('load-gulp-config'), //для загрузки json конфигураций на выходе из предыдущего плагина
    htmlreplace = require('gulp-html-replace'); //этим мы будем вставлять считанныйе из json бандлы в наш html

bundle-assets — отличный плагин т.к он позволяет создать отделную dist директорию со всеми шрифтами, картинками, стилями и т.д, которые необходимы для работы приложения. Пример использования плагина можно посмотреть по ссылке.

Коротко говоря на выходе мы получаем вот такой bundle.result.json, все исходини уже минимизированы и могут располагатся где вам угодно:

{
  "main": {
    "styles": "<link href='main-8e6d79da08.css' media='screen' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='main-5f17cd21a6.js' type='text/javascript'></script>"
  },
  "vendor": {
    "scripts": "<script src='vendor-d66b96f539.js' type='text/javascript'></script>",
    "styles": "<link href='vendor-23d5c9c6d1.css' media='screen' rel='stylesheet' type='text/css'/>"
  }
}

Читать полностью »