7 ms·

A Better Makefile for Bootstrap

66 points by jazzychad 14y ago

zmanji 14y ago
This is an awesome improvement to the Makefile for bootstrap. The OP clearly sees the strengths of make and hopefully upstream will incorporate these changes.
jfb 14y ago
Why background Emacs? That's what make-mode is for!
- jazzychad 14y ago
  bwaahhh??? a cursory google search wasn't very enlightening... teach me your ways, wise one! Edit: oh, I see... compilation mode. I've now set C-c c and C-c r to 'compile and 'recompile respectively. thanks!
  - ubasu 14y ago
    C-x c
  - jazzychad 14y ago
    better yet i've added an after-save-hook to 'recompile so when i save the site is updated by the time i alt-tab over to the browser and reload! M-x eval-expression RET (add-hook 'after-save-hook 'recompile)
kyrra 14y ago
6 seconds to compile. Man that would be nice. A think a full build of my companies product takes 90 minutes.
- mixmastamyk 14y ago
  But what does an incremental build take? If still bad you might try the Samsung 840 Pro SSD, or even a ramdrive. ;)
- emelski 14y ago
  What build tool are you using?
endgame 14y ago
A few questions/thoughts: * Why is the "build" target still there? * Why don't you use `$^` in rules like the one for "bootstrap/js/.js" instead of listing out the files by hand? A lot of your rules have a wildcard in the target part, which means something like `bootstrap/css/.css: less/.less` actually expands to "bootstrap/css/bootstrap.css bootstrap/css/bootstrap-responsive.css bootstrap/css/bootstrap.min.css bootstrap/css/bootstrap-responsive.min.css: less/bootstrap.less less/responsive.less". THAT expands to: bootstrap/css/bootstrap.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap-responsive.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap.min.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap-responsive.min.css: less/bootstrap.less less/responsive.less (All of which have identical commands.) This can potentially break under a make -j (parallel make). Hang on. I'll cook up a pull request.
- jazzychad 14y ago
  Thanks! I'm not a make expert by any means, so any improvements are welcome.. I just did the minimum amount to make it faster. I knew the wildcards would expand, but the subsequent expansions would have their dependencies fulfilled by the first one of them that triggered the commands, so it should short circuit (however you are right, it will be wonky under -j). I left the "build" target in case I submit a pull request upstream and didn't want to completely upset the apple-cart; it's still useful to compile the docs. Also, I just pushed another update to my repo, just fyi in case you are editing for a pull request.
  - endgame 14y ago
    While trying to merge your update, I accidentally my entire git stash. I'll have another go later and send you a pull request.
    - jazzychad 14y ago
      ooooh bummer, sorry about that :( looking forward to it.
    - dbaupp 14y ago
3amOpsGuy 14y ago
Random question for someone way more experienced with this than me...! With Bootstrap i've never figured out, am i supposed to hack the bootstrap less directly or am i supposed to treat bootstrap as a vendor library and craft my styles separately on top? The latter seems to be the case, but can't be sure. Also i've not seen a definitive list of what styles are available with a description of what they're used for, e.g. "jumbotron" appeared in a recent release of bootstrap but i wasn't sure where it could be used or what for.
- ZeroGravitas 14y ago
  You can do both, and in between there is a third way of specifying different variables in variables.less to get e.g. a different font, or link color without much hacking involved. It really depends on how much you intend to deviate from the standard look. Over time, as more people re-use Bootstrap, it seems to be getting more customisable with less hardcoded assumptions so more is possible just via variables. Bootswatch has some examples of how to make things look quite different while not diverging too much from Bootstrap code so that you can pull in upstream changes with relative ease. LESS is pretty cool, even aside from Bootstrap, so it might be worth looking at that anyway.
- jewbacca 14y ago
  While we're on the (off-)topic: How the hell do you use Bootstrap, directly `@import`ed into LESS? I'm learning HTML/CSS for the first time (this century, anyway), and I keep reading about the virtues of semantic markup and the evils of presentational classes and markup, and am totally ready to drink the koolaid. I keep seeing LESS/SASS referenced as important tools in achieving this all tersely; and I would rather not have to dig into custom styling and design until after I've got a broader picture, and also have a vague notion that it handles cross-browser inconsistencies for you, so I'm trying to use Bootstrap. Using them together has been an ungodly massive pain, and most components aren't working at all. Am I having a fundamental misunderstanding of these concepts, or is it just totally not usable in the way I've been struggling to use it? Basic things like `.btn-group`, and `.input-prepend`, do not work when applied with LESS. Many components, documented in the official Bootstrap docs, and properly exposed in the compiled CSS, either aren't in scope or are not fully applied, when mixed in. Styles will apply properly when put in `<ul class=".btn-group">`, but that's what I thought LESS was supposed to help you get away from. `.container` works with `Bootstrap-SASS`[0], but not with the LESS from the official repo[1]. A massive and unpredictable amount of Bootstrap seems to just not be exposed when importing the LESS source, and what is and isn't, and how to use what isn't, doesn't seem to be documented anywhere. The handful of stackoverflow answers on the topic only ever reference `.makeRow` and `.makeColumn(n)`, with no acknowledgement of the wider issue. It's wasted hours and hours of my time, trying to figure this all out. It's infuriating. Would I have a better experience with Zurb Foundation, or some other framework? Is Bootstrap badly documented, or badly designed, or am I just a dumb neophyte missing something major? ---- [0] https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass [1] https://github.com/twitter/bootstrap/tree/master/less https://github.com/twitter/bootstrap/tree/master/less
h2s 14y ago
################################################## It probably also wouldn't hurt to ditch the ugly little ASCII art separator bars. I wish developers wouldn't insist on polluting their creations with these nasty things. ##################################################
georgeorwell 14y ago
Autoconf and Automake? Although they might seem obscure at first glance, the Autotools are stable and reliable for developing robust and efficient build systems, and the mailing lists are always helpful.
- charliesome 14y ago
  You're kidding right?
- endgame 14y ago
  As someone who has contributed to automake, I do not believe they're not the correct tools for this job. You want autoconf either because you want automake, or because you need to do platform-specific checks to adapt your software. You want automake to get automated dependency tracking and to get a Makefile that supports the GNU coding standards. Neither of these apply here: you're basically chaining together small shell snippets to build a couple of files. Raw make is the correct tool, IMHO
  - georgeorwell 14y ago
    I made the suggestion because the Autotools provide a standard way of doing things. If you can shoehorn your project into make distcheck, you're basically done. As you noted above, there were problems with the way he did things that I'm pretty sure would not be there in an Autotools build. Plus, it gives you something expandable instead of a base for more cruft. ./configure is always nice, and any make is about 'automated dependency tracking' so I'm a little unclear as to why that doesn't apply. I guess at this point it's not totally unfeasible to maintain the Makefile by hand.
    - endgame 14y ago
      Let's be honest - the autotools bring a nontrivial amount of cruft to the table, and are regarded as "black magic" by most developers. The automated dependency tracking that I refer to is how automake-generated Makefiles track dependent headers &c. for some compiled languages. That's not at all relevant for the bootstrap project.
zx2c4 14y ago
what you do now: uglify source.js > dest.tmp.js echo "/* Copyright blah blah" > copyright.js cat copyright.js dest.tmp.js > dest.js rm copyright.js dest.tmp.js what you should do: echo "/* Copyright blah blah" > dest.js uglify source.js >> dest.js

66 points by jazzychad 14y ago

This is an awesome improvement to the Makefile for bootstrap. The OP clearly sees the strengths of make and hopefully upstream will incorporate these changes.

jfb 14y ago

Why background Emacs? That's what make-mode is for!

jazzychad 14y ago
bwaahhh??? a cursory google search wasn't very enlightening... teach me your ways, wise one! Edit: oh, I see... compilation mode. I've now set C-c c and C-c r to 'compile and 'recompile respectively. thanks!
- ubasu 14y ago
  C-x c
- jazzychad 14y ago
  better yet i've added an after-save-hook to 'recompile so when i save the site is updated by the time i alt-tab over to the browser and reload! M-x eval-expression RET (add-hook 'after-save-hook 'recompile)

kyrra 14y ago

6 seconds to compile. Man that would be nice. A think a full build of my companies product takes 90 minutes.

mixmastamyk 14y ago
But what does an incremental build take? If still bad you might try the Samsung 840 Pro SSD, or even a ramdrive. ;)
emelski 14y ago
What build tool are you using?

endgame 14y ago

A few questions/thoughts: * Why is the "build" target still there? * Why don't you use `$^` in rules like the one for "bootstrap/js/.js" instead of listing out the files by hand? A lot of your rules have a wildcard in the target part, which means something like `bootstrap/css/.css: less/.less` actually expands to "bootstrap/css/bootstrap.css bootstrap/css/bootstrap-responsive.css bootstrap/css/bootstrap.min.css bootstrap/css/bootstrap-responsive.min.css: less/bootstrap.less less/responsive.less". THAT expands to: bootstrap/css/bootstrap.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap-responsive.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap.min.css: less/bootstrap.less less/responsive.less bootstrap/css/bootstrap-responsive.min.css: less/bootstrap.less less/responsive.less (All of which have identical commands.) This can potentially break under a make -j (parallel make). Hang on. I'll cook up a pull request.

jazzychad 14y ago
Thanks! I'm not a make expert by any means, so any improvements are welcome.. I just did the minimum amount to make it faster. I knew the wildcards would expand, but the subsequent expansions would have their dependencies fulfilled by the first one of them that triggered the commands, so it should short circuit (however you are right, it will be wonky under -j). I left the "build" target in case I submit a pull request upstream and didn't want to completely upset the apple-cart; it's still useful to compile the docs. Also, I just pushed another update to my repo, just fyi in case you are editing for a pull request.
- endgame 14y ago
  While trying to merge your update, I accidentally my entire git stash. I'll have another go later and send you a pull request.
  - jazzychad 14y ago
    ooooh bummer, sorry about that :( looking forward to it.
  - dbaupp 14y ago

3amOpsGuy 14y ago

Random question for someone way more experienced with this than me...! With Bootstrap i've never figured out, am i supposed to hack the bootstrap less directly or am i supposed to treat bootstrap as a vendor library and craft my styles separately on top? The latter seems to be the case, but can't be sure. Also i've not seen a definitive list of what styles are available with a description of what they're used for, e.g. "jumbotron" appeared in a recent release of bootstrap but i wasn't sure where it could be used or what for.

ZeroGravitas 14y ago
You can do both, and in between there is a third way of specifying different variables in variables.less to get e.g. a different font, or link color without much hacking involved. It really depends on how much you intend to deviate from the standard look. Over time, as more people re-use Bootstrap, it seems to be getting more customisable with less hardcoded assumptions so more is possible just via variables. Bootswatch has some examples of how to make things look quite different while not diverging too much from Bootstrap code so that you can pull in upstream changes with relative ease. LESS is pretty cool, even aside from Bootstrap, so it might be worth looking at that anyway.
jewbacca 14y ago
While we're on the (off-)topic: How the hell do you use Bootstrap, directly `@import`ed into LESS? I'm learning HTML/CSS for the first time (this century, anyway), and I keep reading about the virtues of semantic markup and the evils of presentational classes and markup, and am totally ready to drink the koolaid. I keep seeing LESS/SASS referenced as important tools in achieving this all tersely; and I would rather not have to dig into custom styling and design until after I've got a broader picture, and also have a vague notion that it handles cross-browser inconsistencies for you, so I'm trying to use Bootstrap. Using them together has been an ungodly massive pain, and most components aren't working at all. Am I having a fundamental misunderstanding of these concepts, or is it just totally not usable in the way I've been struggling to use it? Basic things like `.btn-group`, and `.input-prepend`, do not work when applied with LESS. Many components, documented in the official Bootstrap docs, and properly exposed in the compiled CSS, either aren't in scope or are not fully applied, when mixed in. Styles will apply properly when put in `<ul class=".btn-group">`, but that's what I thought LESS was supposed to help you get away from. `.container` works with `Bootstrap-SASS`[0], but not with the LESS from the official repo[1]. A massive and unpredictable amount of Bootstrap seems to just not be exposed when importing the LESS source, and what is and isn't, and how to use what isn't, doesn't seem to be documented anywhere. The handful of stackoverflow answers on the topic only ever reference `.makeRow` and `.makeColumn(n)`, with no acknowledgement of the wider issue. It's wasted hours and hours of my time, trying to figure this all out. It's infuriating. Would I have a better experience with Zurb Foundation, or some other framework? Is Bootstrap badly documented, or badly designed, or am I just a dumb neophyte missing something major? ---- [0] https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass [1] https://github.com/twitter/bootstrap/tree/master/less https://github.com/twitter/bootstrap/tree/master/less

h2s 14y ago

################################################## It probably also wouldn't hurt to ditch the ugly little ASCII art separator bars. I wish developers wouldn't insist on polluting their creations with these nasty things. ##################################################

georgeorwell 14y ago

Autoconf and Automake? Although they might seem obscure at first glance, the Autotools are stable and reliable for developing robust and efficient build systems, and the mailing lists are always helpful.

charliesome 14y ago
You're kidding right?
endgame 14y ago
As someone who has contributed to automake, I do not believe they're not the correct tools for this job. You want autoconf either because you want automake, or because you need to do platform-specific checks to adapt your software. You want automake to get automated dependency tracking and to get a Makefile that supports the GNU coding standards. Neither of these apply here: you're basically chaining together small shell snippets to build a couple of files. Raw make is the correct tool, IMHO
- georgeorwell 14y ago
  I made the suggestion because the Autotools provide a standard way of doing things. If you can shoehorn your project into make distcheck, you're basically done. As you noted above, there were problems with the way he did things that I'm pretty sure would not be there in an Autotools build. Plus, it gives you something expandable instead of a base for more cruft. ./configure is always nice, and any make is about 'automated dependency tracking' so I'm a little unclear as to why that doesn't apply. I guess at this point it's not totally unfeasible to maintain the Makefile by hand.
  - endgame 14y ago
    Let's be honest - the autotools bring a nontrivial amount of cruft to the table, and are regarded as "black magic" by most developers. The automated dependency tracking that I refer to is how automake-generated Makefiles track dependent headers &c. for some compiled languages. That's not at all relevant for the bootstrap project.

zx2c4 14y ago

what you do now: uglify source.js > dest.tmp.js echo "/* Copyright blah blah" > copyright.js cat copyright.js dest.tmp.js > dest.js rm copyright.js dest.tmp.js what you should do: echo "/* Copyright blah blah" > dest.js uglify source.js >> dest.js