自动化开发工作流Позвольте разработчикам сосредоточить больше энергии и времени на бизнес-логике, обычно используяwebpackgulpbrowser-syncи других CLI-инструментов, а реализация автоматизации неотделима от написания скриптов, для front-end разработчиков можно сделатьnodejsИнструменты для написания сценариев командной строки также стали одним из обязательных навыков.
Готов к работе
- Сначала мы создаем новый каталог проекта
mkdir iconfont-cliи использоватьnpm initДля инициализации просто нажмите Enter до упора. - Создать файл записи сценария
index.jsи установить в package.jsonbinПараметры, определите имя команды скрипта и файл ввода следующим образом:
Добавить файл ввода команды в package.json
{
"name":'iconfont-cli'
...
"bin": {
"iconfont": "index.js"
}
...
}
Создание index.js, интерпретатора верхнего скрипта объявления файла и обозначение как nodejs
#!/usr/bin/env node
// 代码...
console.log('iconfont cli start');
- воплощать в жизнь
npm link, свяжите пакет npm с глобальной средой выполнения, чтобы командную строку можно было использовать непосредственно в любом месте, а во время разработки можно было выполнять отладку в реальном времени. каталог пакетов npm и связать его с{prefix}/lib/node_modules/<package>, Два для исполняемого файла (bin) для создания мягких ссылок на него в цепочку{prefix}/bin/{name} - консольный ввод
iconfont, например, печатьiconfont cli start, то поздравляю, на данный момент инициализация проекта завершена😊
командное взаимодействие
базовый
Две основные части взаимодействия с командной строкой:输入а также输出. В разделе подготовительных работ мы выполнилиiconfontПростая команда успешно запускает сценарий и выводит журнал. Обычно, когда мы выполняем команду, мы передаем некоторые параметры для настройки пользователем, напримерiconfont --dest xxxxформа. Параметры, передаваемые командой, могут быть переданы в сценарии узла.process.argvДоступ, затем анализ содержимого параметров. К счастью, есть много плагинов Nodejs, чтобы обеспечить разрешение параметров команд консоли, которая более популярна.commander.jsБиблиотеки, позволяющие легко и быстро реализоватьПарсинг параметров и вывод справочной документации
- Установить
npm install commander --save - инструкции
#!/usr/bin/env node
var program = require('commander');
program
.version('0.0.1') // 设置版本号
.option('-d, --dest <path>', '设置目标文件夹') // 设置dest参数
.action(function (cmd) {
console.log(cmd.dest) // 打印用户输入的dest参数
// ...执行后续的功能
})
program.parse(process.argv); // 解析命令行参数
воплощать в жизньiconfont -d ./, вывод консоли./
- Commander предоставляет справочные команды по умолчанию, которые могут быть выполнены непосредственно путем выполнения
iconfont --helpилиiconfont -hвыход
Передовой
Иногда мы хотим позволить пользователям сделать выбор, ввести или подтвердить операции в форме вопросов и ответов, чтобы можно было передать и получить больше информации.
Inquirer.jsБиблиотека реализована.Например, после того, как мы настроили папку dest в коммандере выше, мы хотим, чтобы пользователь выполнил вторую операцию подтверждения, поэтому мы можем сделать следующее:
// 此处略去....
var inquirer = require('inquirer');
program
.version('0.0.1') // 设置版本号
.option('-d, --dest <path>', '设置目标文件夹') // 设置dest参数
.action(function (cmd) {
console.log(cmd.dest) // 打印用户输入的dest参数
inquirer.prompt([
{
type:'confirm',
name:'destOk',
message:'确认使用目标文件夹:' + cmd.dest
}
]).then(function(answers){
console.log(answers.destOk) // true或false
// ...执行后续的功能
})
})
// 此处略去...
воплощать в жизньiconfont -d ./Эффект следующий:
интегрированныйwebfonts-generator
webfonts-generatorПоддерживает создание значков шрифтов css через файлы svg.
- Установить
npm install webfonts-generator --save - В сочетании с приведенными выше интерактивными командами полный код инструмента iconfont-cli выглядит следующим образом.
#!/usr/bin/env node
var program = require('commander');
var inquirer = require('inquirer');
var webfontsGenerator = require('webfonts-generator');
var path = require('path');
var fs = require('fs');
// 遍历查询SVG文件
function findSvgs(folder, list){
list = list || [];
try {
var files = fs.readdirSync(folder);
for(var i=0; i<files.length; i++){
(function(){
var fileName = files[i],
filePath = path.join(folder, fileName),
stats = fs.statSync(filePath);
if(!stats.isFile()){
return findSvgs(filePath, list);
} else if(path.extname(filePath) === '.svg'){
list.push(filePath);
}
})(i);
}
} catch (error) {
console.error(error);
}
return list;
}
program
.version('0.0.1') // 设置版本号
.option('-d, --dest <path>', '设置目标文件夹') // 设置dest参数
.action(function (cmd) {
var currentFolder = process.cwd(); // 当前命令执行的目录
var destFolder = path.isAbsolute(cmd.dest) ? cmd.dest : path.join(currentFolder,cmd.dest); // 目标目录, 需区分是否为绝对路径
inquirer.prompt([
{
type: 'confirm',
name: 'destOk',
message: '确认使用目标文件夹:' + destFolder
}
]).then(function(answers){
// 用户确认后执行后续的功能
if(answers.destOk){
webfontsGenerator({
files: findSvgs(currentFolder),
dest: cmd.dest,
html: true
}, function(error) {
if (error) {
console.log('Fail!', error);
} else {
console.log('Done!');
}
})
}
})
})
program.parse(process.argv);
- Войдите в папку, в которой находится файл svg, и выполните команду
iconfont -d ./iconfont, вы можете создавать различные файлы, связанные со значками и превью html
Публикуйте и используйте
На данный момент мы успешно завершили простой инструмент командной строки.iconfont-cliДалее мы можем загрузить его из хранилища NPM другим разработчикам, конкретные шаги таковы:
- Сначала нам нужноwww.npmjs.com/Зарегистрируйте учетную запись и используйте ее позже
npm adduserЧтобы войти в систему, вам необходимо заполнить соответствующую информацию имени пользователя, пароля и электронной почты. - Проверьте настройки package.json, такие как автор, лицензия, версия, домашняя страница и другую связанную информацию, см.Подробное объяснение свойств package.json
- выпускать
npm publish, в это время мы можем столкнуться с проблемой на снимке экрана ниже, указывающей на то, что iconfont-cli был опубликован другими, поэтому, чтобы изменить имя для публикации, просто измените имя непосредственно в package.json.
npm install -g iconfont-cliУстановить глобально