Вероятно, есть следующие шаги
Новый проект BEJS
Создайте новый пакет файлов.json
Создайте новый файл gruntfile.js
Выполнить Grunt Wasks в командной строке
1. Новый проект Bejs
Исходный код размещен в SRC, а в каталоге есть два файла JS, selector.js и ajax.js. После компиляции код помещается в DEST, и этот Grunt будет создан автоматически.
2. Создайте новый пакет.json
Package.json помещается в корневую каталог и содержит некоторую мета -информацию проекта, такую как имя проекта, описание, номер версии, пакет зависимости и т. Д. Его следует отправить в SVN или GIT, как исходный код. Текущая структура проекта выглядит следующим образом
Контент Package.json должен соответствовать спецификациям синтаксиса JSON, следующим образом
Кода -копия выглядит следующим образом:
{
"имя": "bejs",
"Версия": "0.1.0",
"DEVDEPEDENDIENTS": {
«Грюз»: «~ 0,4,0»,
"Grunt-Contrib-jshint": "~ 0,1,1",
«Грант-контриб-сгибание»: «~ 0,1,2»,
"Грант-контриб-конкат": "~ 0,1,1"
}
}
Grunt in DevDependencies был установлен в предыдущей статье, в то время как Grunt-Contrib-Jshint/Grunt-Contrib-Uglify/Grunt-Contrib-concat не установлен. Три для трех задач
Проверка синтаксиса Grunt-Contrib-JS
сжатие с гритом-кондиционером, используя uglifyjs
Файлы слияния Crunt-Contrib-Concat
В настоящее время откройте инструмент командной строки и введите каталог Project Root и введите следующую команду: NPM Install
Снова проверьте корневой каталог и обнаружили, что есть дополнительный каталог NODE_MODULES, включая четыре подкаталоги, см.
3. Создайте новый файл gruntfile.js
Gruntfile.js также помещается в справочник Project Root. Почти все задачи определены в этом файле. Это обычный файл JS, где вместо JSON можно записать любой код JS. Как Package.json, он должен быть отправлен в SVN или GIT, как исходный код.
Gruntfile.js состоит из следующего контента
Функция обертки имеет следующую структуру. Это типичный способ написания Node.js. Используйте экспорт, чтобы выявить API
Кода -копия выглядит следующим образом:
module.exports = function (grunt) {
// здесь есть вещи, связанные
};
Конфигурация проекта и задачи
Загружать плагины и задачи
Настройте выполнение задач
Этот пример выполняет следующие задачи
Объедините файлы в SRC (AJAX.JS/SELECTER.JS) в Domop.js
Сжатие domop.js в domop.min.js
Оба файла помещены в каталог DEST
Final Gruntfile.js выглядит следующим образом
Кода -копия выглядит следующим образом:
module.exports = function (grunt) {
// Конфигурация
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
Domop: {
src: ['src/ajax.js', 'src/selector.js'],
Dest: 'dest/domop.js'
}
},
Uglify: {
параметры: {
Баннер: '/*! < %= pkg.name %> < %= grunt.template.today ("yyyy-mm-dd") %> *// n '
},
строить : {
src: 'dest/domop.js',
Dest: 'dest/domop.min.js'
}
}
});
// загружать плагины Concat и Uglify, для слияния и сжатия соответственно
grunt.loadnpmtasks ('grunt-contrib-concat');
grunt.loadnpmtasks ('grunt-contrib-uglify');
// зарегистрировать задачу
grunt.registertask ('default', ['concat', 'uglify']);
};
4. Выполнить задачи Grunt
Откройте командную строку, введите каталог Project Root и нажмите Grunt
Из информации о печати видно, что создается успешное слияние и сжатие, а также Dest Directory и ожидаемые файлы. В настоящее время в каталоге проекта больше, чем
Хорошо, вот две общие задачи, Concat и Uglify, Jshint и т. Д., Которые не представлены. Код в Gruntfile.js не интерпретируется один за другим. Заинтересованные студенты могут найти его в официальном документе Gruntjs.