I'm a noob and have read a couple articles about build tools but want to verify what I know:
Build tools minify and concatenate your front end code into a package of executable files that you can then put on a development server so that it can be served to your backend server (liker rails) to show stuff? Not sure if that's correct, but any help in the most layman terms would be greatly appreciated!
NPM is the node package manager where from you can install libraries and such.
Yes you can put your front-end .js files together and minify them with grunt to a build directory at the server. You can also turn for example less into css or typescript into js depending on how you configurate your Grunt.
Take a look at their documentation and there is also a quite excellent tutorial there also https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt
Related
which tool among those in above is used to solve what sort of problem? The simplified and straight to the point answer the better.
You can find some pretty good descriptions of each of these with a basic Google search.
In short, npm is a software repository. Grunt is a tool used bring together multiple javascript tasks into single commands. Webpack is a powerful module bundler, allowing you to bring together javascript, css, html from various sources (one being npm) and bundle them in such a way that you can be left with a single javascript module containing all the code you require.
The World's Largest Software Registry (Library)
npm is the world's largest Software Registry.
The registry contains over 800,000 code packages.
Open-source developers use npm to share software.
What is NPM # W3Schools
Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm.
What is Grunt # Wikipedia
webpack is an open-source JavaScript module bundler.[5][6][7][8] It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.[9] webpack takes modules with dependencies and generates static assets representing those modules.[10]
Webpack takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes
What is Webpack # Wikipedia
difference between grunt and webpack
grunt is stream management tools that perform functions required by users through task configuration, such as format verification, code compression, etc. It is worth mentioning that the code processed by grunt is only replaced by local variable names and simplified. Nothing has changed, it's still your code.
While webpack has carried out a more thorough packaging process, and is more inclined to transform the module grammar rules. The main task is to break through the gap between browsers, analyze, compress, merge, and package various static files that are not originally recognized by the browser, and finally generate the code supported by the browser. Therefore, the code after webapck has been packaged. It’s not the code you wrote, maybe if you look at it again, you can’t understand it anymore.
npm is more like providing building enviroment
npm is a package management tool installed with NodeJS. It can solve many problems in NodeJS code deployment. Common usage scenarios are as follows:
Allow users to download third-party packages written by others from the NPM server to local use.
Allow users to download and install command line programs written by others from - the NPM server for local use.
Allow users to upload their own packages or command line programs to the NPM server for others to use.
npm is more like providing build enviroment, but grunt and webpack is working as building tools.
this is a simple question, but I have been puzzling over it for a while now and it doesn't have much documentation to look at:
I've got a development setup with ClojureScript, figwheel, npm deps working just fine for me. But when I produce a production, compiled JS file, it does not find the npm dependency files. So where and how do I place which of these packages in the production web server, so that they will be found and loaded?
Regards,
Chris
All files required to run your JS will be included in the compilation output after :advanced optimizations. No node_modules files will be required at all so there should not be any need to place them anywhere. Only the files produced by the build directly should be loaded.
:npm-deps however is an alpha feature with many known issues. You can use alternate solutions like webpack or shadow-cljs which work much more reliable.
I am new to the development based on java-script frameworks. I want to understand gulp, npm. Somewhere, I read that these are open source client side development tool but I could not get more insight on this. Please help!
It is a task runner, written in JavaScript to be run in a nodeJs environment. You need a package manager like npm to install it. Npm comes with nodejs.
An Introduction to Gulp.js
It is an application doing things like the following, instead of you. You need only to code once the instructions and run it.
Compressing new and modified images; compiling Sass to CSS code; code linting and validation; concatenating and minifying CSS and JavaScript files; deploying files to development, staging and production servers.
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.
Lately I have been wondering if there is any way to use bower or npm only as a consumer.
Let’s say I am not really interested on developing the package further, but simply using it on my website/application.
So as I would first think:
npm install jquery
I have tried with the flag --production but the same structure was downloaded.
However, that brings me a huge tree of files and the only one I would need is the jquery/dist/jquery.min.js file.
Same goes for bower:
bower install jquery
Again, an expensive list of files, including src folder with a lot of dev-only related files.
I am sorry if I am wrongly assuming package managers behaviour here, but it would be interesting to know how to use these package managers as a simple end-user instead a developer in order to keep my project dependencies updated.
At the moment, I feel that it's just too much for what I need, and that by simply copying jquery.min.js over to my project src folder, it would be much cleaner/simpler.
If the concept of both npm and bower is different and someone can point it out it would be appreciated as well as any tips for an alternative package manager that only imports essential production files.
Apparently Volo does exactly what I was looking for following a concept where JS libraries should be kept as one single JS file.
Here, more information about the project’s design goals.