M
M
Maxim2016-01-14 16:58:22
JavaScript
Maxim, 2016-01-14 16:58:22

How to properly use bower + gulp + sass?

Hello.
Here are some questions
1) I feel some dissonance from using bower + gulp + sass + foundation (or bootstrap - similar)
How to build a project?

  • If you use it directly from bower_components, then you won't be able to disable unnecessary framework components, because after bower update my foundation.scss file will just be overwritten.
  • If you copy foundation to my source folder (aka src/sass), then the point of using bower is lost. Yes, we will not need to go to the site to download the required version of the framework, but the automatic update, one of the main features of bower, is lost - we manually copy everything.

2) Many bower plugins do not have scss files as such. Again, you have to manually copy / translate everything from there to scss. In addition, if you include plugins that have images, you also have to change the paths or copy images from bower to the assets folder. When updating, the procedure for copying from bower_components to the project source folder has to be repeated, i.e. do unnecessary work. Problem.
3) As such, there are no problems only with js files - but see below.
I saw that in cases 2-3 you can automate everything - hardcode the paths of each individual plugin in gulp, make automatic path replacement and similar crutches. But when adding/removing each plugin in bower, the work increases by an order of magnitude, since the gulpfile also needs to be edited. In addition, many plugin developers sin by changing paths when a new version is released, which, as it were, can also cause inconvenience. In general, I consider this option crooked and do not even undertake to use it.
And how in these three cases it is correct to do everything, I do not understand. Since bower was clearly not meant to be copied manually, everything should be simpler and more automated, with the ability to quickly update all plugins from the console. Or am I too idealizing bower's capabilities?
And the last question, purely at the gallp.
4) Is it generally normal practice to manually write paths for each individual plugin/file? That's what I call hardcoding. In my opinion, again, task managers are designed to automatically build the project, so that adding / removing plugins and files to the project does not cause difficulties and unnecessary work in the gulpfile. Or, again, am I relying too much on this tool and is it okay to constantly edit the gulpfile?
The topic turned out to be voluminous, because. sore, but if you answer at least 1 question, I will already be very grateful.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
K
Kostya Gorozhanov, 2016-01-14
@webmaxer

m.habrahabr.ru/post/250569
Look at this article, it will be very useful

V
Vladislav Bezenson, 2016-01-14
@inferusvv

Personally, I do the following. For example bootstrap.
The bootstrap is installed as a bower component. From there, the main style.css file is copied, from where everything is cut into my styles folder. IntelliJ Idea (and other JetBrains editors) are great at replacing all paths at once. They should lead to the bower_components folder. I also copy variables and change the path in the main file. Well, here it is. Something like this)
For myself, I made a starting template and uploaded it to github. Might be interesting to take a look: https://github.com/meethemes/MeeStarter

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question