Введение в Grunt

Опубликовано: 4 Августа, 2021

Grunt - это средство выполнения задач JavaScript, которое помогает нам автоматизировать рутинные и повторяющиеся задачи, такие как минификация, компиляция, модульное тестирование, линтинг и т. Д. В Grunt есть сотни плагинов на выбор, вы можете использовать Grunt для автоматизации практически всего с минимальными усилиями. .
Цель этой статьи - начать работу с Grunt и узнать, как автоматически минимизировать наши файлы JavaScript и проверять их с помощью JSHint.

Установка Grunt-CLI: Во-первых, вам необходимо установить интерфейс командной строки (CLI) Grunt глобально, чтобы мы могли использовать его повсюду.

 $ npm install -g grunt-cli

Создание нового проекта Grunt: вам нужно будет создать новый проект или вы можете использовать существующий проект. Назовем его grunt_app .
Теперь вам нужно добавить в свой проект два файла: package.json и Gruntfile.

package.json: он хранит различные devDependencies и зависимости для вашего проекта, а также некоторые метаданные. Вы укажете grunt и подключаемые модули Grunt, необходимые вашему проекту, как devDependencies в этом файле.

Gruntfile: это файл конфигурации для grunt. Его можно назвать Gruntfile.js или Gruntfile.coffee .

Выполните следующие команды из корневого каталога вашего проекта:

 // Создание файла package.json
$ npm init

// Устанавливаем grunt и добавляем в package.json
$ npm install grunt --save-dev

Теперь создайте в своем каталоге файл с именем Gruntfile.js и скопируйте в него следующее.

module.exports = function (grunt) {
    // Делаем здесь что-то связанное с ворчанием
};

Это функция-оболочка, и весь код Grunt должен быть указан внутри нее. Он включает конфигурацию проекта и конфигурацию задачи.

Теперь создайте еще два файла: index.html и main.js

index.html

 < html >
 < body >
    < h1 >Hello World</ h1 >
    < script src = "main.min.js" ></ script >
 </ body >
 </ html > 

main.js

 function greet() {
    alert( "Hello GeeksForGeeks" );
 }

Мы будем использовать grunt-contrib-uglify для минимизации файлов JavaScript с помощью UglifyJS.

Установите grunt-contrib-uglify:

 $ npm установить grunt-contrib-uglify --save-dev

Обновите свой Gruntfile следующим образом:

 module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON( 'package.json' ),
        uglify: {
            build: {
                src: 'main.js' ,
                dest: 'main.min.js'
            }
        }
    });
    grunt.loadNpmTasks( 'grunt-contrib-uglify' );
 };

Теперь вы можете запустить $ grunt uglify чтобы уменьшить размер файла. Вы также можете установить задачи по умолчанию для grunt, которые запускаются всякий раз, когда запускается $ grunt .
Для проверки наших файлов JavaScript мы будем использовать grunt-contrib-jshint . Установите плагин с помощью $ npm install grunt-contrib-jshint --save-dev Вы можете использовать это, запустив $ grunt jshint

 module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON( 'package.json' ),
        uglify: {
            build: {
                src: 'main.js' ,
                dest: 'main.min.js'
            }
        },
        jshint: {
            options: {
                curly: true ,
                eqeqeq: true ,
                eqnull: true ,
                browser: true ,
                globals: {
                    jQuery: true
                },
            },
            uses_defaults: [ '*.js' ]
        },
    });
    grunt.loadNpmTasks( 'grunt-contrib-uglify' );
    grunt.loadNpmTasks( 'grunt-contrib-jshint' );
     
    // Default task(s).
    grunt.registerTask( 'default' , [ 'uglify' ]);
 };

Node.js JavaScript JavaScript-Misc

Введение в Grunt

РЕКОМЕНДУЕМЫЕ СТАТЬИ