The plugins can be configured in the
Gruntfile.coffee files. The
Gruntfile.coffee is only available if you are using CoffeeScript. Also, the same two files are used for defining the tasks which you want to automate. Either of these files is also commonly known as Gruntfile. Note that your plugins still need to be cataloged in the
package.json file preferably as devDependencies. Just keep in mind that, when there is an additional Node package depending on yours, then it would automatically install every runtime dependency of your package, but not the devDependencies as they are used during the development of the application, and will not be required in the deployment together with the app.
Gulp – a Streaming Build System
Again, you will need a specific file for it – a
gulpfile.jsin the project root. It contains all current tasks. Still, note that Gulp prioritizes code over configuration which makes certain tasks very simple and efficient and also reduces wasted time during the actual creation of a build.
Gulp users can take advantage of more than 3600 plugins and with 850 000 weekly downloads, it has become one of the top tools for developers in NPM.
Bower – a Developer Tool for Dependency Management
While talking about Bower, we have to mention NPM as both have a lot of similarities. In a sense, Bower and a browser have a similar relation as NPM has to Node.js. They are both dependency management tools. However, NPM is used when Node.js modules need installment, while Bower is for managing frontend components like JS, HTML, CSS, etc and you will need NPM in order to install Bower.
Then, similarly, as you have done with NPM, you will need the execution of
bower init on the terminal in order to create a brand new
bower.json config file (the equivalent of
package.json for NPM).
However, while frequently mentioned in the community, Bower is now considered morally old and is still in use due to is heavy usage in legacy apps. This is more evident by the note from the author of Bower on the website’s home page and similar note in the NPM package page:
However, while frequently mentioned in the community, Bower is now considered morally old and is still in use due to is heavy usage in legacy apps. This is more evident by the note from the author of Bower on the website’s home page and similar note in the NPM package page. It recommends the use of Webpack, Yarn, or Parcel, while Bower is under maintenance.
…psst! While Bower is maintained, we recommend using Yarn, and Webpack or Parcel for front-end projects read how to migrate!
Yarn – a Deterministic Package Manager
node_modules folder given a
yarn.lock file. However, this is true only as long as everybody on your team uses the same version of Yarn as the position of packages in node_modules is internally computed in Yarn. This means that using different versions may very well have a non-deterministic outcome due to small differences in Yarn.
Furthermore, Yarn has great caching capabilities, selective version resolutions, auto-merging of lockfiles and Workspaces. The latter of which lets teams automatically combine all of the dependencies from multiple
package.json files and install them at once. Not only that, but it can also create symlinks between workspaces that depend on each other which is even more convenient for large-scale projects. Considering all of the upsides, it doesn’t come as a surprise that since v. 1.0.0, Yarn also comes pre-installed on major continuous integration platforms such as CircleCI, Travis CI, and AppVeyor. As of 1.7.0, Yarn is also able to import its dependency tree from NPM’s
package-lock.json natively, without any external tools.
Furthermore, Yarn has great caching capabilities, selective version resolutions, lockfile auto-merging, and Workspaces. The latter of which lets teams automatically combine all of the dependencies from a few
package.json files and to install them at once. Not only that, but it can also build symlinks between workspaces. Those symlinks would depend on each other which is even more convenient for large-scale projects. Considering all of the upsides, it doesn’t come as a surprise that since v. 1.0.0, Yarn comes already installed on every major continuous integration platforms like CircleCI, and AppVeyor, Travis CI. As of 1.7.0, Yarn is also capable of exporting its dependency tree from NPM’s
package-lock.json natively, with no need of tools.
PM2 – a Process Monitoring Module for Node.js Apps
PM2 provides you with the opportunity to keep apps forever alive, restart them without downtime and create common DevOps tasks. We already did a more detailed review of PM2 in our How to use PM2 tutorial. It includes commands and the further development of an external dashboard with metrics, again a creation of the PM2 Team.
Are Tools Always Necessary?
Absolutely not. For some projects, the extra abstraction added by the tools will not only bloat the actual project but also slow down the development process. Part of a developer’s work is to find the optimal way of doing the task at hand, and while useful, these developer tools are not always needed for achieving the optimal build. There are great projects with a complex structure that are built only with the help of the plain NPM.
Do You Want to Learn More?
While we do have more tools in the pipeline being prepared for deployment on a binary level on our Shared Hosting Environment, we do want to hear your feedback on the information we provide. Do you want to learn more about Grunt and Gulp? Are you interested in finding out more about lockfiles, useful plugins, and commands for these tools? Just write a comment below, about what you want to see next, and we will be sure to reply or incorporate a more detailed answer in one of our future tutorials or blog posts.
The latest tips and news from the industry straight to your inbox!
Join 30,000+ subscribers for exclusive access to our monthly newsletter with insider cloud, hosting and WordPress tips!
Thanks for the heads up. If you have decided that building an SPA best suits your project, there is still the small matter of selecting an SPA framework, library, and tool. Whether they are “best” for you is another question. This is a hotly debated topic, but I will leave you with a list of some of the most popular and fully-supported options on our shared hosting plans.
Choose something and stick with it for a while. Just be aware your favorite option will be superseded by something “better” no matter what you select! Please consider the amount of RAM each application will need since our shared web hosting packages are limited in terms of RAM.
We are planning a detailed overview post on each of the above mentioned frameworks. You may check our past issue on Vue.js: https://www.fastcomet.com/blog/vue-js-wordpress/
Would love to have your feedback on that too. 🙂
I never considered the RAM before so thanks for the heads up hopefully, I will soon be getting my freelance work into the next gear soon and will be able to upgrade my account. I would like to thank you for some great articles and Fastcomet for being a great company, you’re the nuts!