Code Monkey home page Code Monkey logo

bootstrap-5-migrate-tool's Introduction

Bootstrap 5 Migrate Tool

A command-line script designed to help you upgrade your Bootstrap 4 projects to Bootstrap 5. It uses gulp with gulp-replace to replace class names within your folder of HTML pages/templates.

Features

  • Replaces all the Bootstrap 4 class names with the renamed Bootstrap 5 class names
  • Replaces deprecated components (such as .jumbotron and .media) with utility classes
  • Renames all the data attributes (such as data-toggle and data-target) to the new names
  • Updates all Bootstrap v4 CDN links (cloudflare, jsdelivr, stackpath.bootstrapcdn.com and unpkg) to latest version of Bootstrap v5

Usage

Clone this repo and then run the following command:

npm install

Copy your HTML templates to the src folder.

Then run the following command to start the migration:

npx gulp migrate

The migrated HTML templates will overwrite the files in place by default. If you want to keep the original files, you can use the --dest flag to specify a destination folder. See the Options section for more details.

Read the official Bootstrap 5 migration guide here: https://getbootstrap.com/docs/5.3/migration/

Options

Options that may be set via CLI flags. For example: npx gulp migrate --src "./src-dir" --overwrite --verbose

  • src: './src' - string that will be passed to the gulp {@link src} function
  • dest: ./- string that will be passed to the gulp {@link dest} function
  • overwrite: true - overwrite the existing files in place. Cannot be used with --dest flag
  • verbose: true- print the path of each generated / modified file to the console
  • defaultFileGlob: '**/*.{asp,aspx,cshtml,ejs,erb,hbs,html,htm,jsp,php,twig,vue}' - default glob for files to search in. Default: Search all folder and files recursively

Demo

bootstrap-5-migrate-tool's People

Contributors

coliff avatar dependabot[bot] avatar disane87 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

bootstrap-5-migrate-tool's Issues

Please add backdrop

backdrop is not migrated to data-bs-backdrop.

Easy change to this line:

...(animation|autohide|backdrop|boundary|container|content|custom-class|...

Problem installing dependencies.

When I put npm install it gives me a lot of dependencies deprecated. One dependency does not work because subdependencies does not works too.... Can you fix it?

Are recursive replacements on the roadmap?

Hi @coliff,

Firstly, I would like to thank you for doing this project. Secondly, I`ve been trying to find a tool to migrate BS4 to BS5 and this project looked interesting, but the restriction of a flat source directory seems to be too restrictive.

Do you have plans to make replacement recursively? I mean for every file and directory under '/src' perform a deep search replacement. I think this adjust would make your tool more popular and usefull, for me at least :) Most developers have this use case.

As a humble suggestion, if you parametrize the .js to receive in/out directories, I could just make a 'find' based bash script to scan all directories. I dont know how easy/hard is doing it in gulp scripts :) But I`ll try while you dont answer ;)

Best regards,

Thiago

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.