How to use Bower components using Gulp

Asked

Viewed 348 times

1

I use the Gulp to help me in the development, even then beauty if I need the bootstrap or jquery low put in the folders I choose and ok, but I would like to use the bower, but I didn’t quite understand how to use the components that I saw bower as bootstrap, jquery, etc.... ?

Is there any way to already compile everything together with my files scss or js, etc....

gulp bower

1 answer

1

Using the Gulp-useref plugin

It will concatenate the files that are inside each commented build block. At this link you can see the more detailed documentation.

https://github.com/jonkemp/gulp-useref

<html>
<head>
    <!-- build:css css/style.css -->
    <link href="bower_components/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/bundle.js -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>
    <!-- endbuild -->
</body>
</html>

In the case of SASS you must first compile Sass and then include the generated css on the page within the build block. And so generate a file with all the desired css’s.

This plugin performs this task:

https://www.npmjs.com/package/gulp-sass

Browser other questions tagged gulp bower

You are not signed in. Login or sign up in order to post.