Есть следующие шаги:
1. Создайте новый проект BEJS
2. Создайте новый пакет файлов.
3. Создайте новый файл gruntfile.js
4. Выполните задачи Grunt в командной строке
1. Новый проект Bejs
Исходный код размещается в SRC, а в каталоге есть два актива подкаталогов и JS. JS децентрализует Selector.js и Ajax.js, который обсуждался в предыдущей статье, как их объединить и сжать. Эта статья фокусируется только на каталоге Asset, который содержит несколько изображений и файлов CSS. Через некоторое время два ресурса CSS сброшены. CSS и Style.CSS будут объединены и сжаты в каталог DEST/ASSET. Версия Merge All.css, сжатая версия All-min.css.
2. Создайте новый пакет.json
Package.json помещается в корневой каталог, и его значение было введено в предыдущей статье. Текущая структура проекта выглядит следующим образом
Контент Package.json должен соответствовать спецификациям синтаксиса JSON, следующим образом
Кода -копия выглядит следующим образом:
{
"имя": "bejs",
"Версия": "0.1.0",
"DEVDEPEDENDIENTS": {
«Грюз»: «~ 0,4,0»,
"Грант-Контриб-Конкат": "~ 0,1,1",
"Grunt-CSS": "> 0.0.0"
}
}
Предыдущая статья Grunt-Contrib-Concat была введена. Grunt-CSS-это плагин, который будет использоваться в этой статье.
В настоящее время откройте инструмент командной строки и введите каталог Project Root и введите следующую команду: NPM Install
Проверьте корневой каталог и обнаружил, что есть дополнительный каталог Node_Modules, включая четыре суб -заказки, см. Картину
3. Создайте новый файл gruntfile.js
Gruntfile.js также помещается в справочник Project Root. Почти все задачи определены в этом файле. Это обычный файл JS, где вместо JSON можно записать любой код JS. Как Package.json, он должен быть отправлен в SVN или GIT, как исходный код.
Исходный код выглядит следующим образом
Кода -копия выглядит следующим образом:
module.exports = function (grunt) {
// Конфигурация
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
CSS: {
src: ['src/asset/*. css'],
DEST: 'dest/Asset/all.css'
}
},
cssmin: {
CSS: {
SRC: 'dest/Asset/all.css',
DEST: 'dest/Asset/All-Min.css'
}
}
});
// загружать плагины Concat и CSS для слияния и сжатия соответственно
grunt.loadnpmtasks ('grunt-contrib-concat');
grunt.loadnpmtasks ('grunt-css');
// задача по умолчанию
grunt.registertask ('default', ['concat', 'cssmin']);
};
4. Выполнить задачи Grunt
Откройте командную строку, введите каталог Project Root и нажмите Grunt
Из информации о печати видно, что создается успешное слияние и сжатие, а также Dest Directory и ожидаемые файлы. В настоящее время в каталоге проекта больше, чем
На этом этапе CSS слияние и сжатие завершены.