Краткое руководство по Grunt

Знакомство с Грантом:

Знакомство с Грантом
- Китайская домашняя страница:www.gruntjs.net/
- это передняя частьАвтоматизируйте сборкиинструмент, инструмент командной строки на основе nodeJs
- этобегун задачс его богатым и могущественнымплагин
- Общие функции:
  - Объединить файлы(js/css)
  - Сжатый файл(js/css)
  - проверка грамматики(js)
  - Предварительно скомпилированная обработка less/sass
  - разное...
Установите nodejs, проверьте версию
```
node -v
```

Создайте простое приложение grunt_test

|- build----------构建生成的文件所在的文件夹
|- src------------源码文件夹   
    |- js---------------js源文件夹
    |- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt配置文件(注意首字母大写)
|- package.json---项目包配置文件
    {
      "name": "grunt_test",
      "version": "1.0.0"   
    }

Установить grunt-cli глобально
```
npm install -g grunt-cli 
```
установить хрюканье
```
npm install grunt --save-dev
```
Запустите команду сборки проекта
```
grunt  //提示 Warning: Task "default" not found
```
Файл конфигурации: Gruntfile.js
- Этот файл конфигурации, по сути, представляет собой модуль функционального типа узла.
- Настройка кодирования состоит из 3 шагов:
  1. Инициализировать конфигурацию плагина
  2. Загрузить задачу плагина
  3. Регистрация задач сборки
- Базовая кодировка:
```
module.exports = function(grunt){
  // 1. 初始化插件配置
  grunt.initConfig({
      //主要编码处
  });
  // 2. 加载插件任务
  // grunt.loadNpmTasks('grunt-contrib-concat');
  // 3. 注册构建任务
  grunt.registerTask('default', []);
};
```
- Команда: grunt //быстрый успех, но безрезультатно (задача еще не определена с помощью плагина)
Знакомство с плагином Grunt
- Страница со списком плагинов на официальном сайте gruntwww.gruntjs.net/plugins
- Категория плагина:
  - Плагины, предоставленные командой grunt: имена большинства плагинов начинаются с contrib-
  - Плагины, предоставленные третьими лицами: большинство из них не начинаются с вклада.
- Часто используемые плагины:
  - grunt-contrib-clean — чистые файлы (сгенерированные упаковкой)
  - grunt-contrib-concat — объединить код из нескольких файлов в один файл
  - grunt-contrib-uglify — сжать файлы js
  - grunt-contrib-jshint — проверка синтаксических ошибок javascript;
  - grunt-contrib-cssmin — сжимать/объединять css-файлы
  - grunt-contrib-htmlmin — сжать html файлы
  - grunt-contrib-imagemin — сжимать файлы изображений (без потерь)
  - grunt-contrib-copy — копировать файлы, папки
  - grunt-contrib-requirejs- Объединить и сжать все файлы модулей js, управляемые requirejs.
  - grunt-contrib-watch — отслеживать изменения файлов в режиме реального времени и вызывать соответствующие задачи для повторного выполнения

Слияние js: используйте плагин concat

Заказ:

npm install grunt-contrib-concat --save-dev

кодирование:

src/js/test1.js

(function () {
  function add(num1, num2) {
    return num1 + num2;
  }
  console.log(add(10, 20));
})();

src/js/test2.js

(function () {
  var arr = [2,3,4].map(function (item, index) {
    return item+1;
  });
  console.log(arr);
})();

Конфигурация: Gruntfile.js

Задачи конфигурации:

concat: {
  options: { //可选项配置
    separator: ';'   //使用;连接合并
  },
  build: { //此名称任意
    src:  ["src/js/*.js"],  //合并哪些js文件
    dest: "build/js/built.js" //输出的js文件
  }
}

Загрузите плагин:

grunt.loadNpmTasks('grunt-contrib-concat');

Задание на регистрацию:

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

Заказ:

grunt   //会在build下生成一个built.js

Сжать js: используйте плагин uglify

скачать

npm install grunt-contrib-uglify --save-dev

Конфигурация: Gruntfile.js

Задачи конфигурации:

pkg : grunt.file.readJSON('package.json'),
uglify : {
  options: {  //不是必须的
    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
    '<%= grunt.template.today("yyyy-mm-dd") %> */'
  },
  build: {
    files: {
      'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
    }
  }
}

Загрузка задач:

grunt.loadNpmTasks('grunt-contrib-uglify');

Задание на регистрацию:

grunt.registerTask('default', ['concat', 'uglify']);

Заказ:

grunt   //会在build下生成一个压缩的js文件

проверка синтаксиса js: используйте плагин jshint

Заказ:

npm install grunt-contrib-jshint --save-dev

Кодировка: .jshintrc

{
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "expr" : true,
  "immed": true,
  "newcap": true,
  "noempty": true,
  "noarg": true,
  "regexp": true,
  "browser": true,
  "devel": true,
  "node": true,
  "boss": false,
  
  //不能使用未定义的变量
  "undef": true,
  //语句后面必须有分号
  "asi": false,
  //预定义不检查的全局变量
  "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

Изменить src/js/test1.js

(function () {
  function add(num1, num2) {
    num1 = num1 + num3
    return num1 + num2;
  }
  console.log(add(10, 20));
})();

Конфигурация: Gruntfile.js

Задачи конфигурации:

jshint : {
  options: {
    jshintrc : '.jshintrc' //指定配置文件
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}

Загрузка задач:

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

Задание на регистрацию:

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

Заказ:

grunt   //提示变量未定义和语句后未加分号 -->修改后重新编译

Используйте плагин cssmin.

Установить:

npm install grunt-contrib-cssmin --save-dev

кодирование:

test1.css

#box1 {
  width: 100px;
  height: 100px;
  background: red;
}

test2.css

#box2 {
  width: 200px;
  height: 200px;
  background: blue;
}

index.html

<link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>

Конфигурация: Gruntfile.js

Задачи конфигурации:

cssmin:{
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  build: {
    files: {
        'build/css/output.min.css': ['src/css/*.css']
    }
  }
}

Загрузка задач:

grunt.loadNpmTasks('grunt-contrib-cssmin');

Задание на регистрацию:

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

Заказ:

grunt    //在build/css/下生成output.min.css

Используйте плагин часов (чтобы действительно автоматизировать его)

Команда: npm install grunt-contrib-watch --save-dev

Конфигурация: Gruntfile.js

Задачи конфигурации:

watch : {
  scripts : {
    files : ['src/js/*.js', 'src/css/*.css'],
    tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
    options : {spawn : false}  
  }
}

Загрузка задач:

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

Задание на регистрацию:

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
改进：grunt.registerTask('myWatch', ['default','watch']);

Заказ:

grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理

Конфигурация файла Gruntfile.js

module.exports = function (grunt) {

    //  1. 初始化插件配置。 Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: ['src/js/*.js'],
                dest: 'dist/js/build.js',
            },
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc' //指定配置文件
            },
            build: ['build/js/build.min.js', 'src/js/*.js'] //指定检查的文件
        },
        cssmin: {
            options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        },
        watch: {
            scripts: {
                files: ['src/js/*.js', 'src/css/*.css'],
                tasks: ['concat', 'uglify', 'jshint', 'cssmin'],
                options: {
                    spawn: false,  //变量更新。true全量更新。
                },
            },
        },
    });

    // 2.加载插件任务。加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');//合并
    grunt.loadNpmTasks('grunt-contrib-uglify');//压缩
    grunt.loadNpmTasks('grunt-contrib-jshint');//js检查
    grunt.loadNpmTasks('grunt-contrib-cssmin');//压缩/合并css文件
    grunt.loadNpmTasks('grunt-contrib-watch');//真正实现自动化

    // 3.注册构建任务。默认被执行的任务列表。执行的任务是同步的（按顺序执行）
    grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
    grunt.registerTask('myWatch', ['default', 'watch'])

};