Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and nmp. If so how it works and why people use grunt, gulp, bower with npm ?
Basically on what i understand (angular-cli is very recent) it hide the webpack .. in reality it use it behind the scene ... i prefer to use the stack made by myself with Webpack and npm .. but now they've just released a new feature the AOT compiler.
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
In reallity it is possible to be done also with webpack .. but you need some changes of your code :
https://github.com/blacksonic/angular2-aot-webpack
Angular-cli is taken (as idea) from Ember-cli .. it help you to manage and create (scaffold) your app....
I think (but it's my idea) I'll continue without it and I'll try to implement new features (as AOT) by myself cause i want to know what happen behind the scene and know everything of my stack.... but it's my personal idea
Hope it help you ..
Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and npm.
the "pm" in "npm" stands for "package-manager" so, of course you can use it as your main package manager.
You can define your own npm scripts in the package.json file and they'll get run when you enter arbitrary command in the console (npm run {script-name}). It can - in some way - replace grunt, gulp and other task-runners.
why people use grunt, gulp, bower with npm ?
Good question, in fact it's like using a framework, when using gulp, grunt, etc, you have a single API, and you can easily find ready-made tools that fit your needs and save your time instead of writing your own script every time.
Using these tools also allow to use a unified API to run all your tasks and avoid you messing with several scripts, and question such as "how should I pass arguments to this script ?" "what is the command to run this ?" etc.
For bower vs npm there is already an answer here
Related
I am currently working on a project at a large company, and according to the project I am working on, every time I want to quickstart the app, I would need to first run the command npm install and then run all the additional compiling instructions, but the problem is that running npm install can take a long time, and that is why I am wondering if it is necessary to run this command every time I make a change to the code, and then want to compile and run it.
What exactly does npm install do? If you could explain to me in terms of how we compile and run java code i.e. javac bob.java && java bob and try to make analogies on that basis, that would greatly help me understand the concept. The way I am currently thinking about it right now is that npm install kind of runs like how javac runs, but I am not sure if that is correct. Thanks in advance!
NPM Install
npm install simply reads your package.json file, fetches the packages listed there from (usually) https://www.npmjs.com/, and sometimes engages in the build steps for those packages.
So you only have to run npm install when you change your package.json file, and need to fetch new dependencies.
Keep in mind that npm install --save <packagename> (or npm install -S <packagename>) will update your package.json and run npm install all in one line!
You can view the results of your npm install inside ./node_modules/.
To compare to java
This might be a helpful resource if you're trying to get stuff done: Getting Started with Node.js for the Java Developer
Javascript is not a compiled language, unlike java. When you invoke javac, the java compiler reads in all your .java files, compiles them to java bytecode, and then writes them to .class files, which can then be bundled together into a .jar for execution.
Javascript doesn't do any of this! When you invoke node foo.js, the node executable wakes up, reads foo.js, and gets to work invoking it line by line**. Node does other cool things, including maintaining an event loop (which allows it to operate "asynchronously", and allows it to be very efficient as a webserver-- it doesn't sit around waiting for requests to complete, it carries forward with the next event in the queue.
Node also performs JIT and optimization, these details allow it to improve the performance of sections code it notices are running "hot".
Note also that node.js uses the V8 javascript engine (also used in Google Chrome). Really everything I've said above is handled by V8.
(** Technically there is a syntax checker which is run first, before execution. But this is not a compile step!)
It is not necessary to do "npm install" each time you want to compile. You just need to do it when you change the dependencies of your project.
NPM basically is the package manager for node. It helps with installing various packages and resolving their various dependencies. It greatly helps with your Node development. NPM helps you install the various modules you need for your web development and not just given you a whole bunch of features you might never need.
When you start an app, it comes with a package.json file. That package contains the list of node_modules you are gonna need. Whenever you enter npm install, what you are doing is to download that list of node_modules. So yeah, you have to download the modules all over again.
#NOTE: In your project, you have a file called package.json. this file is responsible for holding track of your project's dependencies. That's why you have to install it every time#.
I have gotten better at using the command line. I now use it regularly for foundation, gulp, ionic, etc. One thing I always struggle with is should I be installing modules globally?
I just got a new computer and I am starting fresh. When I do my first Foundation Project, or set up Gulp, when it prompts me to run 'npm install' should I be installing that gloabally? And if I do, will I need to run npm install the next time I set up a Foundation Project?
I think that NPMs documentation really sums it up quite nicely:
If you want to use it as a command line tool, something like the grunt CLI, then you want to install it globally. On the other hand, if you want to depend on the package from your own module using something like Node's require, then you want to install locally.
https://docs.npmjs.com/getting-started/installing-npm-packages-globally
In this case, you should install locally since they are dependencies of the application and not general command line utilities.
This doesn’t fit the Q&A format too well, but I would in general advise against that. Installing modules globally may lead to side effects in other projects that depend on the same packages.
I don’t know what a “Foundation Project” is (and Google does not yield a clear answer), so I think you’d have to add a link explaining what that is.
I use node and gulp to compile SASS, minify javascript, copy file, etc. However, since I have 100+ projects on my local development environment (OSX), I'm starting to wonder why I need 300 NPM packages (40MB, 7000 files!) in every single project I start. And that's when I just install gulp and gulp-sass.
Surely there is a better way to use node/gulp/sass. I have tried using GUI tools like compass and Codekit, but I like working with Gulp and I like working from the command line.
Any suggestions?
Check your node/npm version. Newest version of npm flattens by default which results in much fewer modules total. There is also an alternative called pnpm which can reduce module installs quite a bit by linking when existing versions match.
I'm new to css compiling. I currently have a node.js app using express and precompiled bootstrap 3 files, and I'm diving into Stylus to make this better. I want to compile Stylus and import bootstrap with jeet for grid system.
My question is, how should this work? I'm confused about using grunt or why some tutorials show Stylus being used as middleware. Is it that the middleware compiles it realtime, and why would I need that?
Also I ran npm install bootstrap-styl and npm install jeet, but I'm not sure how to reference these in my styles.styl (If I do #import bootstrap, it can't find the files)
My thought is that I want to somehow link the imports to my node_modules, so they can be updated fluidly (I don't want to just copy the bootstrap .styl files from the node_modules folder, right?). Is this what I would use Grunt for?
well grunt is a task runner program that let you write tasks to run and it does automations (if specified) or manual tasks.
Grunt can watch for files/folders changes and invoke some functionality or tasks (if you will) just like what fileWatch function ( in fs module) does in node.js, and the tasks can be anything really from importing jeet into your stylus before compiling to run your tests and refresh your browser. In your situation it's best to use grunt to do the automation (of importing jeet files and compiling it). Grunt is easy to use, you can look at https://www.npmjs.com/package/grunt-contrib-stylus it has the information you will need to use stylus in grunt.
Make sure you npm install grunt-cli && npm install grunt grunt-contrib-stylus --save-dev to install grunt command for command line and the other for your project.
Then in the root of your project you make a gruntfile.js and put your grunt tasks in there, you can google for some articles about it, pretty straightforward.
So i started using grunt, ran through some tutorials but somehow i haven't found an easy way of initialising a new project with all the predefined plugins in your default gruntfile.js?
So, yeah, i got that everytime you have to reinstall grunt locally with cd your-working-dir and then npm install grunt --save-dev?
Then i have my gruntfile.js which, i guess, i can copy and use just like my default grunt file? I guess the main question of mine is this: do i have to install each of grunt plugins manually whenever i start a new project?
for example if i have sass task in my gruntfile.js and when i start this new project i have to npm install grunt-contrib-sass --save-dev every single time?
You have at least several options, ordered by complexity ascending:
Create your default projects on disk, and a shell script to automate the bootstrapping.
Use Github, and create a default project that you can bootstrap with GIT on your box.
Use Yeoman scaffolding, and create a custom yeoman generator as a NPM package.
Shell automation can apply to the second and third approach as well.
Yeoman, is def. the cool option, but also takes the most time, and requires more maintenance than the other options.