Skip to content
Angelo edited this page Apr 14, 2015 · 11 revisions

Getting Started

This page explains how to install and configure JavaScript Build Eclipse. This Eclipse plugin is based on tern.java.

Installation

To install JavaScript Build Eclipse, please read Installation - Update Site section.

Features

JavaScript Build Eclipse provides features for Grunt and Gulp:

  • completions, hyperlink, hover, validation inside JavaScript editors for Grunt and Gulp.
  • Build explorer view to display in a tree Gruntfile.js, gulkpfile.js 's task / targets and execute it with Eclipse launch.

Prerequisite

To load tasks / targets from Gruntfile.js, gulpfile.js, JavaScript Build Eclipse uses tern plugins tern-grunt and tern-gulp. So to use it, you must

  • convert your project to Tern :

Convert To Tern Project

  • this action open Tern project properties. You must select grunt / gulp module :

Select Grunt Tern Module

Check that Node.js tern module is selected too because tern-grunt and tern-gulp are linked to this tern module.

JavaScript editor

If you open a Gruntfile.js / gulpfile.js, you will benefit with completion :

Grunt completion

Running tasks

You can see Grunt / Gulp tasks in a tree to open it and run it :

Run As - Project Explorer

Run As - Build Explorer

Project Explorer

If your file is named with Gruntfile.js or gulpfile.js and you have converted your project to tern and check the well tern plugin (see prerequisite), you can expand the tree of the Gruntfile.js / gulpfile.js to see in the tree the tasks that you can open it or run it :

Run As - Project Explorer

Build Explorer

To open Build Explorer view, you must go at Window / Show View / Others... and select JavaScript / Build Explorer menu item :

Show View Build Explorer

Add Gruntfile.js / gulpfile.js

If your project is converter to Tern project and you have selected the well tern modules (grunt or gulp), you can add your file Gruntfile.js or gulpfile.js to the Build Explorer by dragging / drop the file from the Project Explorer to the Build Explorer (or use the Add Buildfiles button, the first button of the view) :

Add Gruntfile In Build Explorer With Drag Drop

If your Gruntfile.js, gulpfile.js is not inserted in the view or if the view doesn't display your targets, please check your project is a tern project which have grunt / gulp tern module.

Navigate to the task definition

You can navigate to the task definition by using the contextual menu Open With :

Open with

Execute task

To execute task, you must double click on a task of the tree.

Prerequisite

You must install client :

  • for grunt : the Grunt Command Line Interface is implemented in the grunt-cli package which should be installed globally to execute tasks / targets. Open a dos/sh command and type :

npm install -g grunt-cli

  • for gulp : Open a dos/sh command and type :

npm install -g gulp

In action

When you double click on a task, it creates an Eclipse launch and the result is displayed in the Console View :

Execute Task