Hello,
Since this theme is already utilising twitter bootstrap when theming and some of us use local processor,
it would be nice if a Gruntfile is in place for those who would want to use Grunt ( node task manager ) + bower ( to install the bootstrap source ).

Thoughts

According to the documentation, it is encouraged to make use of the less module or a local pre-processor.
Well, this is good and since a lot of web developers have nodejs installed in their local or remote machine it would be great if (drupal) bootstrap encourages to make use of that power.

Thinking outside the box from the "drupal way" that even though that this utilise nodejs, it is effective in workflow, give the developer the control over which components of twitter bootstrap to include and pre-processed (in the sub-theme) and remove the need of requiring the less module in the drupal installation. Most importantly having the controll of extending the boostrap framework with own their generators.

A very basic sample gruntfile: https://gist.github.com/adnasa/b2fe92444de294bda9cf

Ultimately

If this will be supported, the following commands is all we need then we can go crazy with theming:

  • npm install
  • bower install
  • grunt watch to compile changes while developing.

Thoughts as of this writing

  • The idea behind this issue is to ease package management for the developer ( whether they want to use bootstrap-less, bootstrap-sass or bootstrap-stylus ) and have them preconfigured.
  • Maybe you are already planning this?

----

I've created a sub-theme sandbox to test this idea and it proved good. CDN settings needs to be turned off.
I'm not suggesting to replace the current sub-theme starterkit, rather extend it or have a sub-theme that makes use of this.

The caveat...

... but good practice, is that the less files within the sub-theme should be prefixed to avoid being collided with the (twitter-)bootstrap files.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

adnasa’s picture

If you think that I'm crazy, at least let me know :)

markhalliwell’s picture

I personally have no objections to this. I don't use grunt, but it's becoming increasingly popular. If you create a patch and post it here, I'm sure there won't be any objections from anyone else in why we can not commit this to the project.

Is there a good grunt tutorial/explanation, I'm still not entirely sure what makes it so... popular. I use dedicated programs that help preprocess my less (to avoid the "prefix" conflicts you mention).

adnasa’s picture

Status: Active » Needs review
FileSize
103.45 KB

@Mark Carver:
Yes, it is a great task manager.
I didn't try to find out why and how it is so popular. I just dived into it and it turned to be absolutely fantastic.

From the creator:
http://weblog.bocoup.com/introducing-grunt/

---------------

I wasn't sure if a huge patch is a good idea to submit, but here it is.
I created a new subtheme-starter, since this introduces a new set of workflow.

To get started with hacking:

  • npm install
  • bower install [&& rm -r components/jquery]
  • grunt less (generate the style.css)
  • grunt watch

note: changed status

adnasa’s picture

Status: Needs review » Active

patch test passed: Woho!
------
I did some more thinking.
This approach will need to be put into a serious testdrive ( with different projects and different scenarios ) before we can proceed into considering if we'd want this as a sub-theme starter-kit in the bootstrap project or rather a separate sub-theme project ( like rubik was for tao once upon a time ).

Since it utilises nodejs + grunt as a local processor, it becomes opinionated and there shouldn't be a demand on discussing how it was installed in the local environment ( as well as grunt and bower modules ).

It is an opinionated approach. It has to be specifically clear that this starter-kit targets theme developers.
To see if this sub-theme can be a mature one, I'm actually considering if that we should keep this as a separate projects due to the following reasons ( that I can think of now ):

  • Issue queue: different approaches targets different type of users of the framework. We want to see that clearly in the issue queue.
  • Maturity ( of course ): Let this sub-theme mature on its own in relation to the base-theme. When really (really) ready, we can proceed to integrate.
  • Reflect on demand: I personally want to encourage this approach since it opens the door to explore different front-end frameworks and approaches. With a separate project, we get to see how well this sub-theme is maturing.

Let me know what you think. Maybe I'm over-thinking things.
Changing status, since I've turned this into an open discussion.

adnasa’s picture

Issue summary: View changes

added "current" :-P

Melissamcewen’s picture

I tried this out and got "Loading "less.js" tasks...ERROR"

when I ran Grunt Less. I wonder if it is caused by the fact that Bootstrap uses Recess now.

Melissamcewen’s picture

Realized this was for Bootstrap 2. Bootstrap 3 has a grunt file and I created a subtheme modeled after that. I will hopefully do some cleanup and testing on this during the week.

Melissamcewen’s picture

adnasa’s picture

Melissamcewen
Yeah, the patch I submitted was for bootstrap 2.
Thanks for submitting a patch, I will check it out during the week.

Melissamcewen’s picture

I need to clean it up and also Bootstrap is no longer using Recess.

markhalliwell’s picture

Title: Grunt and bower in bootstrap? » Create LESS starterkit (with Grunt and Bower support)
Version: 7.x-2.x-dev » 7.x-3.x-dev
Category: Feature request » Task
Issue tags: -workflow
Related issues: +#2261189: Add Drush support for creating sub-themes

We're moving in the direction of using drush to create sub-themes via a starterkit (since there's too many different ways to do it). I've already created the LESS starterkit. We should probably create our own package.json, Gruntfile.js and bower.js files that mimic what is in https://github.com/twbs/bootstrap (but stripped down for a Drupal Bootstrap sub-theme).

markhalliwell’s picture

markhalliwell’s picture

Component: Code » Drush
NexusStar’s picture

I see that this is old issue but do someone is still interested in this?

adnasa’s picture

This is now an outdated issue since this concerns bootstrap 2.x theme
However, the "problem" is still interesting for all themers and I still think that it would be great to utilise grunt to build themes whether it is for this particular theme or not.

markhalliwell’s picture

It's not outdated, it's been repurposed or expanded (if you will)... as per my last comment, #10. I simply have not had time to work on this as I would like to have.

adnasa’s picture

oh, Sorry!
I've been absent a bit too long.

JeffM2001’s picture

I've created a patch for a bower/grunt workflow which can be used to download and compile bootstrap.

Here's what it does:

  • npm install — downloads bootstrap, copies the fonts folder into the subtheme dir, and copies variables.less into the subtheme/less dir if a customized version does not already exist
  • grunt — compiles the files in subtheme/less, using a gruntfile which mirrors the relevant parts of bootstrap's own gruntfile
  • grunt watch — same as above, but continues watching for changes

The reason for copying the variables.less file from the bootstrap download is to avoid the errors from outdated variables which has popped up in other issues. The only difference between the default variables.less file and the one which comes with the theme is the location of the fonts directory, which is why the install script also copies that folder into the correct place.

This script will automatically download the most recent version of bootstrap, but if you prefer a specific version you can adjust it by modifying bower.json.

joelstein’s picture

Excellent work, JeffM2001! I just came looking for grunt support, and you posted this yesterday. Awesome.

I wrote an article just a couple days ago about how to create a LESS-powered sub-theme, but you just made it easier.

Everything works as advertised, however—and this is a BIG however—it will break your site. Hard. Because deep inside of the npm module "grunt-bowercopy" there is a file named "lcov.info", which Drupal thinks is a module info file. You can read lots about this issue at the related issues attached to this comment.

So far the best solution I've seen is to patch core as in #619542-146: Malformed theme .info files break menu_router generation.

But for the task at hand, is there a way to exclude that file by upgrading what depends on it? It looks like it was fixed in the lcov-parse repo.

joelstein’s picture

One other idea would be to ignore all the bootstrap vendor files that aren't required for compiling CSS or included as JS.

For example:

node_modules
bower_components
bootstrap/dist
bootstrap/fonts
bootstrap/grunt
bootstrap/*.*
bootstrap/LICENSE
JeffM2001’s picture

Oh, interesting. I didn't experience this issue because, for me at least, when I run npm install I don't see lconv-parse anywhere in the tree. Can you tell which package that dependency is coming from? It might be possible to figure something out by adjusting the packages/dependencies used.

Another possible solution would be to eliminate the dependency on bower all together. This would be relatively simple, by just adding bootstrap as a dependency in the package.json. The only downside is that when you install bootstrap with npm, it's missing some of its build files, but the only missing one that matters here is less/.csscomb.json. I'm not sure that running the csscomb task really matters that much, but I included it since I was trying to mirror bootstrap's grunt workflow as closely as possible, which is why I went with bower. If we decide we don't care about csscomb, we can get rid of bower too.

joelstein’s picture

The offending file is at node_modules/grunt-bowercopy/node_modules/bower/node_modules/handlebars/coverage/lcov.info.

Yeah, I'm not sure how useful csscomb is, since the generated CSS will likely be compressed anyway on most Drupal sites.

JeffM2001’s picture

Status: Needs work » Needs review
FileSize
29.63 KB

Makes sense to me. Here's a revised patch that removes bower (and csscomb) as dependencies, and instead just uses npm to download bootstrap.

JeffM2001’s picture

Well, darn, even with the revised patch, I just ran into the issue that joelstein discovered, because a new release of promise package includes a lcov.info file.

We're never going to keep up with random dependencies adding random test files to their releases, so instead, I've added the workaround of a postinstall script that finds and deletes all .info files within node_modules, as suggested in #2329453: Ignore front end vendor folders to improve directory search performance.

We could add bower and csscomb back in now if we want, but I'm thinking it's probably not necessary.

markhalliwell’s picture

Status: Needs review » Needs work

I've briefly reviewed this, but will need to look at this in more detail later (locally) so it works well what I intend with #2261189: Add Drush support for creating sub-themes.

There's some package information that should really be dynamically replaced with the Drush sub-theme wizard (i.e. name, author, homepage, version, etc.).

Also, I'm not entirely sure the use of Bower and Grunt here is what I was really intending. See: http://stackoverflow.com/a/21199026

I'm not really a fan of copying stuff outside of node_modules as that can get rather dicy when attempting to update things in the future.

IMO, Bower should really just be used for the Bootstrap library itself while Grunt would handle the automation aspect. What the patches above do or rather feel like is really just a hodgepodge of the two.

Please don't take this personal either, I really do appreciate the patches and this helps this issue immensely. I just don't have the time to really look at this in great detail (locally) yet... that's all.

FWIW, there is a lot of whitespace and no newline at EOF issues as well.

JeffM2001’s picture

Fair enough. I created this as a workflow that worked for me and figured I'd share it, but totally recognize that it may not be the workflow for everyone. There are definitely multiple ways to do things.

To me, this seemed like a relatively easy way of accomplishing the tasks necessary for set up, which are:
1. Download bootstrap
2. Copy bootstrap into the subtheme directory (it shouldn't be left in node_modules because that shouldn't be committed to a repo)
3. Get the fonts directory into the right place for bootstrap to find it
4. If a variables.less file doesn't already exist, copy over the one from bootstrap

#1 can be accomplished with bower or npm. I originally had it using bower, and then switched it to npm because of the .info file issue, but that turned out to be a moot point. If we're using bower, it can be done either through a grunt task or doing bower install.

#2-4 I did with grunt for expediency. Another option if you wanted to completely separate the components would be a shell script that runs on postinstall instead of grunt init. I suppose it would also be possible to download with bower and leave the files in place and adjust the other parts of the theme to look for them there. Would then also need to instruct people to manually remove the jquery dependency that comes with bootstrap though bower, and to manually copy over variables.less and set the right fonts path.

I like the npm/grunt workflow (with or without bower) because it neatly takes care of all the steps with one command.

Generating the package info dynamically seems doable. There would probably need to be some logic to prompt for additional info depending on the starterkit chosen.

Happy to keep working on this patch and clean up the coding style stuff, just let me know what direction you want to go in once you're able to dig in.

markhalliwell’s picture

Priority: Normal » Critical
gagarine’s picture

Just, having a lot of files (all the node modules) in the theme slow things down when cache is cleared. Personnaly I always put my gulpfile (but same go with grunt) outside the drupal folder:

-- project folder
+-- app (drupal folder)
+ gulpfile
+ bower_component
+ node_modules

The gulpfile is responsible of building everything in the theme...

JeffM2001’s picture

Agree that structure can make sense, but I'm not sure there's a way we can do that with a gruntfile packaged with the theme.

My assumption was that node_modules and bower_components would never be included on a production site, which is why I added a .gitignore and had it copy all required files into the theme directory.

markhalliwell’s picture

Yes, using .gitignore for node_modules and bower_components is the direction we should be going for now.

gagarine’s picture

I agree. But even on your local it can slow things down a lot. But perhaps this should be fixed in core.

gagarine’s picture

What we can do is having one reference to the theme's path. So we can easily move the grunt file where we want and just change one line.

frob’s picture

wouldn't the sollution be to have grunt build the theme and place it in its entirety into an app/build directory. That would be the root of the theme.

markhalliwell’s picture

Title: Create LESS starterkit (with Grunt and Bower support) » Add Grunt/Bower support to LESS starterkit
Component: Drush » Starterkit (LESS)
Category: Task » Feature request
Priority: Critical » Normal

Priority is being de-escalated so we can release 7.x-3.1.

markhalliwell’s picture

Version: 7.x-3.x-dev » 8.x-4.x-dev

This likely isn't going to happen for 7.x-3.x.

lpalgarvio’s picture

Bower has been deprecated.

Currently well supported and popular tools are Grunt, Gulp and Yarn.
Yarn is very fast and light.

markhalliwell’s picture

Title: Add Grunt/Bower support to LESS starterkit » Add Grunt/Gulp/Yarn support to LESS starterkit

True. I just didn't think to change the title when I was going through the IQ the other day (had a lot of issues to get through).

markhalliwell’s picture

Status: Needs work » Postponed
Related issues: +#2554199: Bootstrap 4

This is likely to remain postponed for a while considering that BS4 doesn't (yet) have a LESS port. Regardless, I'm intending 8.x-4.x to support both BS3 and BS4, so this will still need to happen at some point.

dillix’s picture

May be we should use yarn+webpack instead of Bower+Grunt/Gulp? I successfully compiled BS for sass subtheme and there is support for less also. BS4 also use webpack for compile to css dist.

markhalliwell’s picture

Status: Postponed » Closed (won't fix)