I use browserify for dependency injection of my angular modules. However, this is only for javascript and some of my angular modules in my node_modules/ also include css. What's the best way to concatenate these files into a single css file. I think this should be easy but can't find any project that does exactly what I do in a proper manner. I'm sure there must be more people using browserify that came across the same problem.
Related
I'm using Babel with default es2015 preset to convert ES6 JS code. Since I'm working in another project with TypeScript, I've come to appreciate the publi/private annotation on methods.
I'd like to use the same annotation in JS code. Even if it won't actually make methods on the exported object private, I find it useful to know quickly if a method is used by other classes, or not.
Is there a Babel plugin or other means to strip away all public/private declarations, so I can use it in my code? even without namespace checking that would still be very helpful.
There is a current proposal for "Private Fields" that is in the process of being implemented, but it not part of Babel yet. In the next month or two I'd expect it to be available.
Why and how does Polymer use Bower?, and do I NEED to learn to use Bower to use Polymer?
I was going through the Catalog of components, and all of them seem to have a 'Bower Command'.
Thanks for your help.
Edit: Bower is a package manager just as npm, I do understand that much. What I meant to ask is: It can be argued that npm has a wider user base than Bower some even argue that we should stop using bower altogether like here and here. So, how is it beneficial to Polymer the use of bower when there are other options. Is what Polymer does only achievable through bower?
Bower just like npm is a package manager. Here you can see the difference between the two.
No, you don't need to use bower to use Polymer, but without that you'll have to manually download each components that you need, place it at the location from where you can refer it and keep track of newer versions of each package that you have used.
In case you are creating custom elements to publish the situation get even worse as you'll have to pass a file along with your project listing all the dependency and the user will have to manually download each dependency listed in your project and then will have to make sure that he has all the dependencies that were required by your dependencies and so on.
This will make process of custom elements or modules in general very hard to use. That's why such projects use some package management tool.
Edit: since the original question has been edited to ask more about why, the short answer is Bower's focus was for web dependencies, so it results in a flat dependency tree. With Bower now deprecated, the Polymer team's recommendation is to use Yarn with the --flat option. That will also result in a flat dependency structure without multiple versions of the same dependency, which is critical to web development, and something NPM has stated they will never offer.
You should be seeing Components move from Bower to Yarn more, especially after Polymer 3 is released. For more information than you'd ever want about this topic, check out this discussion: https://github.com/package-community/discussions/issues/2
How do I use webpack with famo.us
I found a seed https://github.com/Vertice/famous-webpack-seed and have seen it in use with grunt before. I was wondering if anyone could help me implement it with Gulp. I don't seem to be able to figure out how to get gulp-webpack to find and use the famous modules. Either through the pre compiled require version or the npm uncompressed version.
No doubt the webpack is useful to those who have lots of gulp specific stuff, and I think it's great to see the number ways of being able to get going with Famo.us is increasing, but I think the official generator-famous starter is a lot more fully featured, better documented, and has easier commands IMHO.
This is a pretty dumb question, but I haven't really been able to find a satisfactory answer: How do I use gulp globbing to select all files in all subdirectories below a certain directory?
I've tried:
'./src/less'
'./src/less/'
'./src/less/*'
None of them seem to work.
The pattern for all files under all directories is usually ./src/less/**/*.* or ./src/less/**/*, either should work.
Generally speaking, it's better to match specific files extensions — even if they should all be the same — to prevent grabbing system files or other junk. In that case, you can do ./src/less/**/*.less for just .less files, or something like .src/less/**/*.{less,css} for both .less and .css files.
The Grunt website has a pretty good reference for the majority of minimatch globs. (Both Grunt and gulp use minimatch, since it's the glob library for pretty much everything Node related.)
It would be nice for gulp or minimatch to have their own complete docs, but that's open source for you.
'./src/less/**' seems to work. Still, if someone has a more definitive list of all globbing commands, I would be happy to accept your answer and add it to the gulp docs. Right now you have to go to the docs for one of gulp's submodules, which then gives you a list of manpages. It would be good to have a direct reference, especially for designers using gulp.
I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:
1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?
I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options:
Library for making static websites with HAML/SASS/CSS framework
2. Should I use StaticMatic?
Google search said it is the best. But there seems no update for 2 years
https://github.com/staticmatic/staticmatic
There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html
If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)
3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?
http://fireapp.handlino.com/
I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.
Hope to get some advise for my unique situation. Thanks.
The answer is Middleman
http://middlemanapp.com/
It's the replacement for out-dated StaticMatic
HAML:
For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.
SASS:
For SASS here is the needed setup. https://gist.github.com/3899112.
For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.
So your file should look like this:
{
"filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
"build_on_save": 1
}
You can extend this list at your own wish.