I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.
Webpack is replacing bower and gulp
Bower was use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )
In some big project people still use gulp because give more control of the project
npm is the package manager for JavaScript.
If I want to I can install bootstrap from either npm or bower or gulp.
People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.
Webpack replacing bower and gulp is because those are overkilling people's time.
The last thing is a question, I saw on youtube people download sass sass(which I understand is a front end thing tool)eg:(npm install gulp gulp-sass --save-dev) in gulp and then not using bower, is that even the the right way to do things? because if yes why do we still need to use use bower?
Webpack can be an alternative for gulp. Webpack doesn't do anything Bower does.
Bower was often used to manage frontend dependencies (eg, bootstrap), while npm was often used to manage backend dependencies (eg, express).
People use gulp because it's worked out for them so far, and the time/effort it takes to learn something else and switch to something else might not be worth it.
npm is a package manager for dependencies, but it isn't exclusive to JavaScript dependencies.
You can install bootstrap with Bower or npm.
Starting with version 3, npm installs everything in a flat hierarchy. You can use npm to manage dependencies that are used on the frontend AND backend, so some people don't see the point in having Bower.
Webpack can be an alternative to Gulp, but a lot of people had a hard time learning how to use Webpack.
Yes, you would npm install gulp-sass --save-dev, which installs gulp-sass with npm. I imagine gulp-sass is a tool that lets you use SASS and Gulp together. You wouldn't use Bower in any of this.
Related
According to Heroku I should avoid global dependencies when asking Heroku to build my project. But I still want Bower and Grunt on the command line.
My question is: how then should I be running these tools?
Rather than installing them with npm install -g, should I be adding paths from node_modules to PATH, or the like? (Ubuntu)
If Grunt/Bower are installed globally on development machines -say when someone new starts on the project -then presumably npm install -g grunt-cli might give a different Grunt version to what's in package.json. Hence what Heroku runs and what developers run might accidentally differ.
(Or is that unlikely to be a problem?)
The best practice is to keep everything local, with npm install --save.
That way you can align versions for everyone in the team simply by tweaking the package.json file.
If you only need Bower and Grunt etc. to be available in your dev environments, then install them with npm install --save-dev. This will cause them to be saved in a devDependencies section in your package.json. Dependencies referenced therein will not get distributed to production (e.g. Heroku), but will be available in all your dev environments.
If you really do need Bower and Grunt etc. to be available on Heroku, then install them with npm install --save.
At any rate, npm should automatically save symbolic links to your executables (e.g. grunt-cli) in directory node_modules/.bin, and should take care of adding node_modules/.bin to your PATH, so you don't have to worry about that.
I need to use a package on npm, so I'm trying to learn how to use npm. The tutorials are fine, but I feel like they're assuming I know node.js, which I don't, and I'm having a hard time finding a tutorial for npm that doesn't also assume I know node.js. Do I need to learn node.js to use npm?
you don't need to know anything about node to use npm, its just a package manager. Install npm and then npm install all the packages you want. You will need to learn the npm toolchain, however, and it also helps to know which options are available for the various commands.
At the very least you should know the difference between installing a package globally and installing a package locally, i.e npm install -g vs. npm install respectively.
ok, so I didn't find my answer in the already asked questions. I recently had to reload my node to include trying to reload all the globally loaded 'things' (that I could remember).
Back when I was learning "Gulp", I remember having to do a separate install for gulp-util. But when I looked in the node > node_modules folder, I see where gulp-util was already loaded as a sub module of gulp. This was also a duplicated and exact version as to my separate install of gulp-util.
So does gulp (npm install -g gulp), now come with gulp-util as a part of its install process. So doing a separate install of gulp-util is pointless and overkill?? Or do I still need to do it???
Yes, you still need.
The fact that gulp-util is a submodule (along with any other) of gulp just means that gulp uses it, but doesn't mean that you don't need to include it.
If you want to get gulp-util from gulp you can do something like it:
var gutil = require('gulp/node_modules/gulp-util')
But, I strongly advise you not to.
Anyway, gulp is a build tool, overkill shouldn't be a concern here since you won't ship it or its rendundant submodules for the client.
I've noticed that yo angular generates a GruntFile containing all of the instructions, but typically does not include grunt.loadNpmTasks('<package>') statements, which may or may not be indicative of globally installed packages (?).
So, what is the correct way to add additional NPM packages to a yo-angular generated project?
the yo angular generator uses load-grunt-tasks, which prevents the gruntfile from becoming to bloated:
This module will read the
dependencies/devDependencies/peerDependencies in your package.json and
load grunt tasks that match the provided patterns.
the generator uses load-grunt-tasks without a pattern provided
require('load-grunt-tasks')(grunt);
which means that it will simply try to load everything (with the pattern grunt-*, for more info see comments below) you install via npm.
long story short, just npm install it (grunt tasks should be installed with the --save-dev option, to automatically move it to the devDependencies)
$ npm install your-grunt-task --save-dev
Ok it may sound like a stupid question.
But I was wondering, why would one install node using bower. I mean bower already requires nodejs and npm as clearly stated on their website, right?
Will try to make it more clear by adding what I added as comment below:
I mean bower already need node and npm, then why would someone use bower to install node again? What's the point? Is there any specific use case? I cant think of any though!
I'm not sure if I understand your question right, but it seems like you are confused on something there.
npm or Node Package Manager it is use for installing/managing the node modules server sides
Usage example: npm install express or npm install bower -g
Whereas bower you use that to install anything that is use client-side
Usage example: bower install jquery or bower install font-awesome
Ignore my above answer if you are talking about why there is a package on the bower component for node.
If so I think they've registered that in bower but not even sure what can you really do with that since most of the stuff would require you to run it server-side, but some library maybe accessible/usable client-side. I have to search/find the example from that to demonstrate but I couldn't find one at the moment.