Weenesta | Blog | Javascript coding tools

Hello,

Today, I'd like to introduce 4 essential tools for coding Javascript :

Bower

Bower is a Javascript dependency manager, it keeps track of all these packages and make sure they are up to date.

It allows to recover source files of certain dependencies via these lines of command:

# installs the project dependencies listed in bower.json

bower install
# registered package

bower install jquery
# GitHub shorthand

bower install desandro/masonry
# Git endpoint

bower install git://github.com/user/package.git
# URL

bower install http://example.com/script.js

According to [documentation] (https://bower.io/), it is no longer relevant:

...psst! While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects read how to migrate!

Grunt

This a JavaScript task-runner tool. You can use Grunt to automate just about anything with a minimum of effort. Many of the tasks you need are already available as Grunt Plugins, and new plugins are published every day.

Here's how to install Grunt:

npm init
npm install -g grunt-cli
npm install grunt --save-dev

Here's who Grunt's config file looks like, initially:

// Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};

Gulp

It's a streaming build system . Very similar to Grunt , in the final results provided. However, it is a system that allows construction processes that look less like a task manager than a workflow framework.

Here's how to install Gulp:

npm init
npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js

Yarn

Yarn is a deterministic package manager. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

See you soon,

Mathieu