[FEATURE] Load web libraries via bower instead of composer 38/38238/2
authorBenjamin Mack <benni@typo3.org>
Thu, 26 Mar 2015 11:13:26 +0000 (12:13 +0100)
committerWouter Wolters <typo3@wouterwolters.nl>
Thu, 26 Mar 2015 12:57:52 +0000 (13:57 +0100)
Introduce "bower" as a component dependency management for
loading all JS/CSS related libraries.

This patch introduces bower to install web-related components
into EXT:core/Resources/Contrib/components/ which is excluded
from the Git Repository.

The main LESS file of t3skin, which is currently the only place
where the current third-party library (previously from composer)
were used. The code is adapted accordingly.

The new file .bowerrc holds the information where to install the
components, bower.json contains the dependencies needed.

Currently there are only development-related components in
bower.json.

For more information about bower see http://bower.io.

Resolves: #66042
Releases: master
Change-Id: I4ee7e7a5a47d39a3c66c674556e59643d0ff2336
Reviewed-on: http://review.typo3.org/38238
Reviewed-by: Daniel Sattler <sattler@b13.de>
Tested-by: Daniel Sattler <sattler@b13.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
.bowerrc [new file with mode: 0644]
.gitignore
bower.json [new file with mode: 0644]
composer.json
typo3/sysext/core/Documentation/Changelog/master/Feature-66042-WebLibrariesLoadedViaBower.rst [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less

diff --git a/.bowerrc b/.bowerrc
new file mode 100644 (file)
index 0000000..1eb6540
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,5 @@
+{
+  "directory": "typo3/sysext/core/Resources/Contrib/components/",
+  "analytics": false,
+  "timeout": 120000
+}
index 92a00c2..6d18b4f 100644 (file)
@@ -28,6 +28,7 @@ bin/*
 Build/node_modules/*
 nbproject
 Packages/*
+typo3/sysext/core/Resources/Contrib/components/*
 typo3/contrib/vendor/*
 typo3temp/*
 typo3conf/*
diff --git a/bower.json b/bower.json
new file mode 100644 (file)
index 0000000..2b246ba
--- /dev/null
@@ -0,0 +1,29 @@
+{
+  "name": "typo3",
+  "version": "7.2.0-dev",
+  "authors": [
+    {
+      "name": "TYPO3 CMS Core Team",
+      "role": "Developer",
+      "homepage": "http://forge.typo3.org/projects/typo3cms-core"
+    },
+    {
+      "name": "The TYPO3 Community",
+      "role": "Contributor",
+      "homepage": "https://typo3.org/community/"
+    }
+  ],
+  "description": "TYPO3 CMS is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.",
+  "keywords": [
+    "typo3",
+    "cms",
+    "content management system"
+  ],
+  "license": "GPL-2.0+",
+  "homepage": "http://typo3.org/",
+  "private": true,
+  "devDependencies": {
+    "fontawesome": "4.3.0",
+    "bootstrap": "3.3.2"
+  }
+}
index d9483ee..426d0f1 100644 (file)
@@ -45,9 +45,7 @@
        },
        "require-dev": {
                "mikey179/vfsStream": "1.4.*@dev",
-               "phpunit/phpunit": "~4.5.0",
-               "twbs/bootstrap": "3.3.2",
-               "fortawesome/font-awesome": "4.3.0"
+               "phpunit/phpunit": "~4.5.0"
        },
        "suggest": {
                "ext-gd": "GDlib/Freetype is required for building images with text (GIFBUILDER) and can also be used to scale images",
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-66042-WebLibrariesLoadedViaBower.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-66042-WebLibrariesLoadedViaBower.rst
new file mode 100644 (file)
index 0000000..29d3af9
--- /dev/null
@@ -0,0 +1,31 @@
+======================================================
+Feature: #66042 - Web Libraries are included via bower
+======================================================
+
+Description
+===========
+
+Web libraries like Bootstrap, jQuery or Font Awesome are now installed via bower package management,
+see http://bower.io/ for details on how bower is set up.
+
+All third-party libraries needed to build final CSS or JS files that will be shipped with the core are
+excluded from the TYPO3 Core Git and installed via bower when building e.g. a new CSS file out of less.
+
+For setting up a development environment working with web libraries bower (which can be installed via npm
+on a local machine) installs all needed dependencies defined in bower.json. The file .bowerrc describes
+where the files are put. To set up the third-party libraries and their dependencies, execute the following
+command.
+
+.. code-block::
+
+       bower install
+
+For updating the code-base to a new version, the bower.json in the root directory can be adapted.
+Executing ``bower update`` will then update the third-party libraries.
+
+
+Impact
+======
+
+Setting up a development environment when working with frontend libraries (e.g. LESS)
+requires npm and bower to be installed on the local machine.
index cdbd724..dd54265 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
-// Prefix for composer require-dev libraries
-@composer-package-directory-prefix: "../../../../../contrib/vendor/";
-// Prefix for third-party libraries in typo3contrib/
+// Prefix for libraries loaded via bower
+@library-directory-prefix: "../../../../../sysext/core/Resources/Contrib/components";
+
+// Prefix for third-party libraries in typo3/contrib/
 @typo3contrib-directory-prefix: "../../../../../contrib/";
 
 // Core variables and mixins
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/variables.less";
+@import "@{library-directory-prefix}/bootstrap/less/variables.less";
 @import "bootstrap/variables.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/mixins.less";
+@import "@{library-directory-prefix}/bootstrap/less/mixins.less";
 
 // Reset and dependencies
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/normalize.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/print.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/glyphicons.less";
+@import "@{library-directory-prefix}/bootstrap/less/normalize.less";
+// @import "@{library-directory-prefix}/bootstrap/less/print.less";
+// @import "@{library-directory-prefix}/bootstrap/less/glyphicons.less";
 
 // Core CSS
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/scaffolding.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/type.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/code.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/grid.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/tables.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/forms.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/buttons.less";
+@import "@{library-directory-prefix}/bootstrap/less/scaffolding.less";
+@import "@{library-directory-prefix}/bootstrap/less/type.less";
+@import "@{library-directory-prefix}/bootstrap/less/code.less";
+@import "@{library-directory-prefix}/bootstrap/less/grid.less";
+@import "@{library-directory-prefix}/bootstrap/less/tables.less";
+@import "@{library-directory-prefix}/bootstrap/less/forms.less";
+@import "@{library-directory-prefix}/bootstrap/less/buttons.less";
 
 // Components
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/component-animations.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/dropdowns.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/button-groups.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/input-groups.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/navs.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/navbar.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/breadcrumbs.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/pagination.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/pager.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/labels.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/badges.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/jumbotron.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/thumbnails.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/alerts.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/progress-bars.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/media.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/list-group.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/panels.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/responsive-embed.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/wells.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/close.less";
+@import "@{library-directory-prefix}/bootstrap/less/component-animations.less";
+@import "@{library-directory-prefix}/bootstrap/less/dropdowns.less";
+@import "@{library-directory-prefix}/bootstrap/less/button-groups.less";
+@import "@{library-directory-prefix}/bootstrap/less/input-groups.less";
+@import "@{library-directory-prefix}/bootstrap/less/navs.less";
+@import "@{library-directory-prefix}/bootstrap/less/navbar.less";
+// @import "@{library-directory-prefix}/bootstrap/less/breadcrumbs.less";
+@import "@{library-directory-prefix}/bootstrap/less/pagination.less";
+// @import "@{library-directory-prefix}/bootstrap/less/pager.less";
+@import "@{library-directory-prefix}/bootstrap/less/labels.less";
+@import "@{library-directory-prefix}/bootstrap/less/badges.less";
+// @import "@{library-directory-prefix}/bootstrap/less/jumbotron.less";
+@import "@{library-directory-prefix}/bootstrap/less/thumbnails.less";
+@import "@{library-directory-prefix}/bootstrap/less/alerts.less";
+@import "@{library-directory-prefix}/bootstrap/less/progress-bars.less";
+@import "@{library-directory-prefix}/bootstrap/less/media.less";
+@import "@{library-directory-prefix}/bootstrap/less/list-group.less";
+@import "@{library-directory-prefix}/bootstrap/less/panels.less";
+@import "@{library-directory-prefix}/bootstrap/less/responsive-embed.less";
+@import "@{library-directory-prefix}/bootstrap/less/wells.less";
+@import "@{library-directory-prefix}/bootstrap/less/close.less";
 
 // Components w/ JavaScript
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/modals.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/popovers.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/tooltip.less";
-// @import "@{composer-package-directory-prefix}/twbs/bootstrap/less/carousel.less";
+@import "@{library-directory-prefix}/bootstrap/less/modals.less";
+@import "@{library-directory-prefix}/bootstrap/less/popovers.less";
+@import "@{library-directory-prefix}/bootstrap/less/tooltip.less";
+// @import "@{library-directory-prefix}/bootstrap/less/carousel.less";
 
 // Utility classes
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/utilities.less";
-@import "@{composer-package-directory-prefix}/twbs/bootstrap/less/responsive-utilities.less";
+@import "@{library-directory-prefix}/bootstrap/less/utilities.less";
+@import "@{library-directory-prefix}/bootstrap/less/responsive-utilities.less";
 
 // Components from bootstrap plugins
 @import "@{typo3contrib-directory-prefix}/twbs/bootstrap-datetimepicker.less";
  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/variables.less";
+@import "@{library-directory-prefix}/fontawesome/less/variables.less";
 // Override
 @import "font-awesome/variables.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/mixins.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/path.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/core.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/larger.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/fixed-width.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/list.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/bordered-pulled.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/animated.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/rotated-flipped.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/stacked.less";
-@import "@{composer-package-directory-prefix}/fortawesome/font-awesome/less/icons.less";
+@import "@{library-directory-prefix}/fontawesome/less/mixins.less";
+@import "@{library-directory-prefix}/fontawesome/less/path.less";
+@import "@{library-directory-prefix}/fontawesome/less/core.less";
+@import "@{library-directory-prefix}/fontawesome/less/larger.less";
+@import "@{library-directory-prefix}/fontawesome/less/fixed-width.less";
+@import "@{library-directory-prefix}/fontawesome/less/list.less";
+@import "@{library-directory-prefix}/fontawesome/less/bordered-pulled.less";
+@import "@{library-directory-prefix}/fontawesome/less/animated.less";
+@import "@{library-directory-prefix}/fontawesome/less/rotated-flipped.less";
+@import "@{library-directory-prefix}/fontawesome/less/stacked.less";
+@import "@{library-directory-prefix}/fontawesome/less/icons.less";
 
 /*!
  * add nprogress styles, adapted to TYPO3 needs