Gulp - управление версиями для файлов javascript

Я занимаюсь объединением и минификацией файлов javascript. Я делаю это с помощью gulp. Теперь я хочу, чтобы, если я внесу какие-либо изменения в любой из своих файлов и нажму gulp, он сгенерирует новый объединенный и минимизированный файл с номером версии, например:

<script src = "https://cdn.test.com/bundle-1.0.0-min.js/"></script>

тогда

<script src = "https://cdn.test.com/bundle-1.0.1-min.js/"></script>

Я хочу сделать это с помощью gulp, потому что я уже использую gulp для других целей. И еще одна вещь, если это возможно, то есть ли способ, которым я не указываю версию no на моей html-странице каждый раз, когда я вношу изменения, и моя html-страница каким-то образом сама по себе получает последнюю версию.

Извините, я не понял вашей точки зрения. package.json содержит все зависимости моего проекта от npm, так какую версию мне следует прочитать?

Ask 08.08.2018 14:10

Я дал на это ответ. Надеюсь, это решит ваши вопросы. @Просить

eisbehr 08.08.2018 15:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
715
1

Ответы 1

Это просто переименование файла в общем. Но на самом деле это не должно быть автоматизированной задачей увеличения номера версии. В противном случае вы быстро получите такую ​​версию, как 1.0.2092, что вам не поможет. Я бы посоветовал прочитать версию из package.json и использовать ее в качестве имени файла. Это должно быть довольно просто, если вы уже работали с gulp.

Если вы не хотите использовать глобальную версию (Запись version) вашего package.json, вы можете добавить собственную запись для вашей версии пакета. Или даже используйте файл, отличный от package.json. Вы даже можете использовать это как конфигурацию, для которой файлы должны быть объединены, чтобы все было в одном месте:

{
  "bundle": {
      "version": "1.0.1",
      "files": [
        "path/to/file-one.js",
        "another/file.js",
        "..."
      ]
  }
}

Просто быстрый пример:

var pkg = require("./package.json");
var gulp = require("gulp");
var rename = require("gulp-rename");

gulp.src(pkg.bundle.files)
    .concat("bundle.js")
    .pipe(uglify())
    .pipe(rename(function(path) {
        path.extname = "-" . pkg.bundle.version + "-min" + path.extname;
    }))
    .pipe(gulp.dest("./"));

Примечание: вместо rename вы можете просто указать имя concat, но мне нравится разделять его. Но для полноты:

.concat("bundle-" + pkg.bundle.version + "-min.js")

О второй части вашего вопроса, чтобы заменить вещи в ваших файлах:

Это будет возможно, если вы создадите свои html-страницы и замените / вставите в них соответствующий путь. Вы можете снова использовать версию package.json, чтобы собрать ее и заменить. Или используйте такие инструменты, как gulp-inject. Этот простой инструмент может добавлять файлы js и css в ваши HTML-шаблоны. Просто создайте область, где они должны быть размещены в файле html, например: <!-- inject:js --><!-- endinject -->. Впоследствии это тоже простые таки gulp:

var pkg = require("./package.json");
var gulp = require("gulp");
var inject = require("gulp-inject");

gulp.src("dev/index.html")
    .pipe(inject("bundle-" + pkg.bundle.version + "-min.js"))
    .pipe(gulp.dest("prod/"));

спасибо за ответ, но как и когда обновляется версия package.json?

Ask 09.08.2018 10:07
Как: вы открываете файл в любом текстовом редакторе по вашему выбору. Когда: всякий раз, когда вы вносили разумные изменения в эти файлы. Хорошо, маленькая шутка. ;) Как я пытался вам сказать в своем ответе, приращение и изменение версий следует производить только вручную. Поэтому всякий раз, когда вы хотите увеличить эту версию, вы делаете это самостоятельно, а затем запускаете задачу gulp, чтобы все перестроить. @Просить
eisbehr 09.08.2018 10:13

@elsbehr, вот в чем проблема, я не могу сделать это вручную. Я хочу, чтобы все было автоматизировано из-за некоторых ограничений.

Ask 09.08.2018 10:16

так есть ли какой-нибудь gulp npm, который делает это автоматически, например 1.0, 1.1, 1.2. Неважно, что он достигнет 1,1000, потому что мне придется один раз внести изменения в синюю луну, но я не могу сделать это вручную.

Ask 09.08.2018 10:18

Вы не можете увеличить версию в каком-то файле вашего проекта? Почему? Если вы не можете сделать это вручную, как сценарий должен делать это автоматически? И даже в этом случае я бы не стал предлагать вам способ решения этой задачи с помощью автоматизированной задачи, потому что это действительно плохая идея. Но, пожалуйста, расскажите мне подробнее о своей проблеме, почему вы не можете сделать это вручную и почему тогда вы даже хотите увеличить версию? Может у меня есть для тебя другая идея. @Просить

eisbehr 09.08.2018 10:20

Итак, проблема в том, что я создам задачу gulp, и мой код будет отправлен в dev env, и у меня нет доступа к этому env. Кроме того, я не единственный, кто будет вносить изменения в файлы js, другие разработчики также могут вносить изменения, и никто не хочет снова и снова открывать файл package.json. Но мне нужно управление версиями, потому что нам, возможно, придется использовать разные версии в разных средах.

Ask 09.08.2018 10:24

Есть ли способ открыть файл package.json через задачу gulp и получить оттуда номер версии?

Ask 09.08.2018 10:25

Да, в моем примере вы get номер версии из package.json и используете его для сборки. Но если я вас правильно понял, скорее всего, у вас set версия там. А это плохая идея. После вашего описания проблемы я все еще считаю, что это плохая идея. Более того, я даже больше считаю, что вам действительно не следует этого делать. Если вы работаете с большим количеством разработчиков, вам следует выполнить задачу вручную. Или, если вы работаете с большой группой разработчиков, вам следует сделать какую-то промежуточную стадию ваших изменений, а затем создавать новую версию, когда вы закончите работу. Вот как работает управление версиями. @Просить

eisbehr 09.08.2018 10:30

Другие вопросы по теме