Установка Grunt в Ubuntu после установки Node.js

0. Проверка установлен ли Grunt в системе

grunt --version

1. Удаление Grunt из операционной системы, если ранее он был установлен

npm uninstall -g grunt

2. Установка Grunt CLI

sudo npm install -g grunt-cli

3. Создаем папку, в которой будем использовать Grunt

cd /home/dovsyannikkov
mkdir GruntProject

4. Переходим в созданную папку, где будем использовать Grunt

cd GruntProject

5. Создаем файл package.json для указания модулей, используемых в проекте для их инсталяции

npm init

6. Заполним созданный файл package.json следующим кодом

{
  "name": "GruntProject",
  "author": "Dmitry Ovsyannikov",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1"
  }
}

Необязательная команда

npm install grunt-contrib --save-dev

установит все плагины и обновит package.json до такого состояния

{
  "name": "GruntProject",
  "author": "Dmitry Ovsyannikov",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib": "~0.6.1"
  }
}

7. Установим Grunt и JSHint в эту папку GruntProject, согласно перечисленным в файле package.json плагинам

npm install

8. Проверим установку Grunt и Grunt CLI

grunt --version

9. Создадим файл Gruntfile.js, в котором будет находится код для Grunt

touch Gruntfile.js

10. Заполняем файл Gruntfile.js следующим кодом

module.exports = function(grunt) {

  // Configuration goes here
  grunt.initConfig({

    // Some typical JSHint options and globals
    jshint: {
        all: [
            'main.js'
        ],
        options: {
            devel: false,
           
            camelcase: true,
            curly: true,
            eqeqeq: false,
            immed: true,
            indent: 4,
            latedef: true,
            newcap: true,
            noarg: true,
            quotmark: 'single',
            undef: true,
            unused: true,
            strict: false,
            trailing: true,

            eqnull: true,
            laxcomma: true,

            browser: true,
            jquery: true,
            node: true,
            nonstandard: true,
            worker: true,

            white: false,

            //nomen: true,

            //boss: true,
            maxlen: 130,

            globals: {
                require: true,
                define: true,

                underscore: true,
                '_': true
            }
        }
    }

  });

  // Load plugins here
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Define your tasks here
  grunt.registerTask('default', ['jshint']);

};

11. В папке GruntProject создаем файл main.js

touch main.js

12. Файл main.js заполняем кодом, который будем тестировать через JSHint

/**
 * Searches a keyword and shows formatted results
 *
 * @class pages/search/main
 */

define([
    'jquery'
  , 'app.config'
  , 'repo/utils/xss'

  , 'text!./templates/list-results.html'

  , 'underscore'
], function(
    $
  , appConfig
  , xss

  , tplSocialButtons
) {

    var CSS_FORM_NAME = 'js-form'

      , $query
      , $form
      , $searchButton;

    function init() {
        updateVars();
        bindEvents();
    }

    function updateVars() {
        $query = $( '.js-query' );
        $form = $( '.' + CSS_FORM_NAME );
        $searchButton = $( '.js-search' );
    }

    function bindEvents() {
        $searchButton.click( search );
    }

    function search() {
        var query = $query.val();

        $.ajax({
            type: 'GET'
          , url: appConfig.urls.search
          , data: query
          , success: redrawView
        });
    }

    /**
     * Sends form data and shows a result
     *
     * @param {Object} json Object with news
     * @method redrawView
     * @public
     */
    function redrawView( json ) {
        var data = xss.clear( json )
          , html = _.template( tplSocialButtons, { data: data } );

        $form.html( html );
    }
   
    return {
        init: init
      , redrawView: redrawView
    };
});

13. Запускаем Grunt для тестирования кода в файле main.js через JSHint, код которого описан в файле Gruntfile.js

grunt