While the introduction of package managers (npm, Bower), module bundlers (Webpack, Require.js, Browserify), code transpilers (Babel, TypeScript) and task runners (npm scripts, Grunt, Gulp) is definitely beneficial to the development process, it also presents a huge barrier to entry for some. I found myself constantly putting off learning these tools and furthering my development knowledge because the task seemed insurmountable and it was difficult to know where to start. In this post I will provide you with the resources that I found most helpful, and try to explain things as simply as possible in my own words.
I think it's also important to understand that while all these tools do add complexity to the development process and present a learning hurdle initially, ultimately they do add value and reduce your workload considerably once you're familiar with them.
Command Line / Terminal
First things first, in order to use the tools explained in this post, you need some basic knowledge of the terminal. I know, I know... but it's really not as complicated as you think.
By default when you open the terminal it will start in the root directory of your filesystem. You probably don't want to create things there, and have a nicely organised "Projects" folder somewhere. You can change the current directory to that one by using the "cd" command, for example:
Once the terminal has changed to this directory, you can run other commands from there.
Package Managers (npm)
You know how you like to use libraries (things like React or jQuery) in your project? Package managers automate the downloading and upgrading of those libraries. The most popular package manager is "npm".
Right at the start of a project, you would run:
Which guides you through prompts to set up a new project and create a file called package.json. This file basically holds all the information about your project.
If you want to use a library (E.G. React), you would run:
npm install react --save
And just like that, npm will download React, install it in your project (in a node _ modules folder) and add it to your package.json file. Now npm has the ability to examine the package.json file and install any missing packages or upgrade them if necessary. This in itself is a huge timesaver, because it takes all the legwork out of going to the library's website, downloading a package, unzipping it, copying and pasting it into your project directory, adding the line to your code to link to the file... And that's just for one library. Imagine if you had hundreds... you can already see the benefit this automation provides.
Module Bundlers (webpack)
var jquery = require('jquery');
The problem is, the browser has no idea what "require" is. So webpack will automatically search for all occurrences of require and replace them with the contents of the file being pointed to.
Code Transpilers (babel)
A code transpiler will run through all of your code and if it finds new features that are not currently supported by web browsers (E.G. ES6's new import statement for modules), it will convert that code to an older version which is more compatible.
This is fantastic news as a developer, because it means you get to work with the latest cutting edge code, with no worry that what you are producing will be incompatible with browsers. A code transpiler will guarantee compatibility.
Task Runners (npm scripts)
Task runners like npm scripts allow us to pull everything together and run multiple tasks automatically to build our final project.
For example, you could create a custom command "build" (but this can be named whatever you like) which executes many different tasks of your choosing to produce your production files. By running:
npm run build
You could automatically run Babel to transpile your code. Then you could use a different tool to convert Sass to CSS. Then you could run webpack to bundle all your files together, then obscure them and minify them. Then you could start a web server and open your project in your favourite web browser, or automatically upload the files to an ftp server. All of these things are done simply by running one command. The possibilities are endless, and completely customisable, which is hugely powerful and a massive time saver.
Hopefully this gives you a general idea of what each of the various tools can do, and just how much they can benefit you by using them. There is certainly a learning curve and a shift in the way you would normally build your projects, but once you understand how everything fits together you are handsomely rewarded.
As ever, any questions surrounding any of what I've covered in this post, please feel free to comment below.