I am a php developer and have not done much front-end work for 3 or 4 years so I feel its time to update my skill set. I want to install a less compiler and set-up a bootstrap work flow using my Ubuntu desktop. I know how to use the basic pre-compiled bootstrap but I’m kinda lost with all this LESS stuff. I need to use it as I want to shoehorn bootstrap onto an existing application that has all its own css classes in the html output that cant really be changed easily. So Ill need to extend the LESS files to add these classes to the boostrap css.
I am just not sure where to start. Does anybody know of tutorial that will walk me through installing and setting up the LESS complier then how to use it so that I can work in an efficient way. Iv searched but can really find any Ubuntu specific or up to date tuts.
For installing less, you can use lessc:
it is a node.js package which convert less to css, with several options:
http://lesscss.org/#using-less-installation
You need to install npm before
Full installation:
# apt-get install npm
# npm install -g less
And to use, as explained in the doc, just use lessc package.
For me, when I work with less, I use Bracket editor: http://brackets.io/
You can then install an extension which, when you save less file, automaticaly compile less to a css file: https://github.com/jdiehl/brackets-less-autocompile
(you find it with built-in extension manager)
Maybe for others IDE / editor, you have also plugins
Related
After I am installing a root library, such as npm install aws-amplify, sometimes it seems that I need to install its sub library such as npm install #aws-amplify/cli. Why did not npm install aws-amplify install every sub library within it?
What's the npm packaging and installing rule here? can someone help me clearing understand that?
You are mixing up 2 different syntaxes. The #namespace/package is relatively new. It used to be just package, and some packages still use this. In the old way package tend to name themselves 'namespace-package' as some sort ofworkaround.
But that is not your question. Your question is 'why do they even do this?'.
Why wouldn't you just download all the npm package out there? Then you have and can use everything, right? As you can imagine this doesn't make much sense, you will only want to download and use what you need. Think of this quote from Joe Armstrong:
You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.
The quote is a entirely out of context since it is more about not using classes, but it still kind of applies to this. At lot of packages will offer you a core package and the option to add sub-packages based on your need. Like in your example, someone might not need #aws-amplify/cli, this way he doesn't have to download it.
Installing PHPUnit with composer globally seems more convenient to me for those two reasons:
1. Using it everywhere without needing an extra install.
2. Just running phpunitinstead of vendor/bin/phpunit (using an alias might solve this)
Are there any reasons why a local install might be the better choice? For example: using the exact same versions every time. (don't have a lot of experience with PHPUnit, so not sure if this really is an issue or not)
The big disadvantage of installing packages globally is that you might end up with different versions of PHPUnit between developers in your team (unless you are the only developer). This might cause some side effects.
If you install it locally using composer.json, then every developer in your team will have exactly the same version as you do for that specific application. Also, everybody will see when you change the version in composer.json.
If you don't like typing vendor/bin/phpunit, you can use Makefile (which is also in your project):
test:
vendor/bin/phpunit --configuration=test/Unit/phpunit.xml
then run it ...
make test
I like to install it via composer and the require-dev block, but another way that does come highly recommended is to download the phpunit.phar into the project, to use that.
Either way, you control exactly which version is being used (and when it's updated) - which is the most important part, as you can't so easily control what people have installed globally.
I see this package called gulp-copy and I can't see anywhere if it's adopted for the latest version of gulp. Is that never an issue? I'm worried that I happen to pick wrong package constellation or perhaps an obsolete configuration all together.
Questions are:
In this particular case, does the linked gulp-copy work well with gulp 4?
Is there a general way to determine which packages work well with gulp?
There is no generalized way to determine whether a certain package only works with gulp 3 or gulp 4 (besides reading the documentation for that package). Package creators cannot programmatically specify what version of gulp their package supports and there's no warning when using a package that's designed for a different version of gulp.
That being said, there are some heuristics you can use depending on what kind of packages you are dealing with:
General node packages: those are packages that were not specifically designed for gulp at all. You can use them with gulp, because you can use any node package with gulp, but they make sense outside of gulp as well.
These packages should work with any version of gulp since they don't contain gulp-specific code and are therefore independent of any changes made to gulp. Examples that are often used with gulp are merge-stream and del.
Gulp-specific packages on the other hand can be affected by changes to gulp.
Among those there's gulp plugins which are packages that are supposed to be used in gulp streams with .pipe(). Their names almost always start with gulp-, they are tagged with gulpplugin on npm and listed on the GulpJS website.
These should also generally be safe to use with any version of gulp. Gulp streams are just regular nodejs streams, so those plugins should work with either version of gulp (although nodejs streams have their own history of compatibility problems, but that's not really relevant anymore). Barring major changes to the vinyl file format there's not much that can happen that might affect gulp plugins.
The gulp-copy plugin that you mention falls into this category and should be safe to use with both gulp 3 and gulp 4.
All that being said there are a few gulp plugins that only make sense for a specific version. gulp-plumber for example fixes an annoying issue with error handling in streams that is only necessary for gulp 3, but not gulp 4. gulp-src-ordered-globs circumvents a problem with ignore patterns in gulp 3 that's fixed in gulp 4.
Finally there's what I like to call gulp extensions. They're not supposed to be used with .pipe(). Instead they extend the capabilities of gulp in other ways.
These are the ones you need to watch out for. A lot of them deal with gulp's task running capabilities which have undergone major changes between gulp 3 and gulp 4. There's probably many packages in this category that only work with a certain version of gulp.
I wouldn't worry too much about it though. Most of those packages will prominently display their limitations in their documentation. run-sequence for example has a big fat note at the top informing the user that this is a temporary solution for gulp 3. I published a package named gulp-parameterized the other day that only works with gulp 4 and it screams so in all-caps at the top of the docs.
Basically scan the documentation of any package you want to use for these kinds of notes and you should be relatively safe.
I'm stumped. I cannot understand the getbootstrap.com Getting Started info. I'm running on Windows 7 Pro. I would like to use Pingendo - which I'm new to - to create my website.
I downloaded the distribution version bootstrap-3.3.7-dist.zip (pre-compiled) and unzipped it. Then I came to the MaxCDN code. Where do I put that code??
For the source code version, I see references to things I don't know about: Bower, npm, Composer, Grunt, Less, and SASS. All these appear to be Linux based tools - from the command lines shown. How does one accomplish the same thing under Windows without installing yet more tools? Do I even need to compile this code to use the greater features?
You can either add the downloaded bootstrap css and js files to your project and reference them or you can just use the cdn which is just the same files hosted on a server. You do now have to know about any of those to get started with Bootstrap. They are just additional ways to install it, and different preprocessors that you can leverage.
I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.