文章/答案/技术大牛

发布

社区首页 >专栏 >2024年Node.js精选：50款工具库集锦，项目开发轻松上手（五）

2024年Node.js精选：50款工具库集锦，项目开发轻松上手（五）

前端达人

发布于 2024-06-14 06:01:09

70100

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

不得不说，Node.js的强大离不开那150万个NPM包。没有NPM，Node.js依然可以使用，但绝不会如此强大。在这个系列文章中，我们探讨了每个开发者都应该了解的一些常用NPM包。在本系列的最后一篇文章中，我将介绍第41到第50个推荐的NPM包。这些包都是我精挑细选出来的，希望能帮助到你的开发工作。让我们继续深入探索这些不可或缺的工具吧！

41、Ora：你的CLI任务进度指示器

在日常开发中，我们常常会遇到一些耗时较长的任务，比如文件处理、数据下载或者代码编译等。为了让用户在等待过程中不至于感到无聊或者不安，提供一些视觉上的反馈就显得尤为重要。今天我们要介绍的这个NPM包——Ora，就是为了解决这个问题而生的。

Ora是一个功能强大且灵活的CLI旋转指示器库，适用于Node.js应用程序。它能够创建丰富的视觉指示器，让用户在任务进行中获得即时反馈，从而大大提升用户体验。

const ora = require('ora');

const spinner = ora('正在处理文件...');
spinner.start();

// 执行你的耗时任务

spinner.succeed('文件处理成功!');

自定义显示效果

你还可以根据需要自定义旋转指示器的样式、颜色等，比如：

const spinner = ora({
  text: '正在下载数据...',
  spinner: 'star',
  color: 'cyan',
});

spinner.start();

// ...

spinner.fail('下载失败!');

进度跟踪

如果你希望显示一个具有进度跟踪功能的指示器，可以这样实现：

const spinner = ora({
  text: '正在编译代码...',
  progress: true,
});

spinner.start();

// 执行带有进度更新的任务

spinner.succeed('代码编译成功!');

优点：

用户友好且直观：无论你是初学者还是资深开发者，Ora都非常容易集成和使用。
视觉效果出色：提供多种样式和自定义选项，让你的用户体验更加生动。
信息反馈及时：实时告知用户任务进展和可能出现的问题。
轻量高效：对应用性能影响极小。

缺点：

预定义样式有限：某些用户可能希望有更多的样式选择。
自定义有一定学习曲线：高级选项可能需要查阅文档和示例进行探索。

42、Faker库带你轻松生成测试数据

在开发过程中，我们常常需要大量的测试数据来进行功能验证和调试，而手动生成这些数据既耗时又繁琐。这时候，Faker这个强大的Node.js库就派上用场了。Faker可以生成各种类型的逼真假数据，帮助我们在测试、原型设计和数据库填充等方面省时省力。

Faker提供了广泛的数据生成功能，包括：

个人信息：名字、地址、电话号码、电子邮件、头像等。
财务信息：信用卡号码、银行账户号码、加密货币地址。
地理位置：地理坐标、IP地址、公司名称和标志。
文本内容：句子、段落、诗歌、信件，甚至博客文章。
日期和时间：时间戳、相对日期、日期范围。

生成个人信息

假设你需要生成一个人的基本信息，使用Faker可以这样实现：

const faker = require('faker');

const person = {
  name: faker.name.findName(),
  address: faker.address.streetAddress(),
  phone: faker.phone.phoneNumber(),
  email: faker.internet.email(),
};

console.log(person);

创建公司信息

如果你需要生成一家公司的信息，可以使用如下代码：

const company = {
  name: faker.company.companyName(),
  slogan: faker.company.catchPhrase(),
  address: faker.address.streetAddress(),
  logo: faker.image.imageUrl(),
};

console.log(company);

生成产品评论

假如你需要一组产品评论数据，可以使用Faker的链式调用生成：

const reviews = [];

for (let i = 0; i < 10; i++) {
  reviews.push({
    author: faker.name.findName(),
    rating: faker.random.number({ min: 1, max: 5 }),
    content: faker.commerce.productReview(),
  });
}

console.log(reviews);

Faker的优缺点

优点：

丰富的数据选项：满足各种数据生成需求。
定制化控制：可以根据具体的上下文和需求定制数据。
使用简便：简单的API和现成的示例，易于上手。
提高测试效率：节省测试数据创建的时间和精力。
保护数据隐私：生成不可识别的数据，保障用户隐私。

缺点：

随机性可能过高：生成的数据有时可能感觉不够“真实”。
单个字段控制有限：定制化主要应用于数据类型，而非具体字段。

43、Puppeteer的强大功能

在现代Web开发中，自动化任务和测试变得越来越重要。Puppeteer作为一个功能强大的Node.js库，能够通过DevTools协议控制Chrome或Chromium浏览器，使开发者可以高效地完成多种任务。无论是数据抓取、UI测试，还是生成截图和PDF，Puppeteer都能轻松应对。

Puppeteer可以帮助你自动化以下任务：

网页抓取：动态提取网站数据。
UI测试：自动化浏览器交互，测试Web应用程序。
生成截图和PDF：捕获网页的视觉表示。
爬取和渲染：导航和处理单页应用（SPA）。
控制浏览器行为：在浏览器环境中执行JavaScript。

Puppeteer的使用场景与示例代码

抓取产品详情

假设你需要从某个产品页面抓取数据，使用Puppeteer可以这样实现：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com/products/123');

  const title = await page.$eval('.product-title', el => el.textContent);
  const price = await page.$eval('.product-price', el => el.textContent);

  console.log(`Title: ${title}`);
  console.log(`Price: ${price}`);

  await browser.close();
})();

生成网页截图

如果你需要生成某个网页的截图，可以使用如下代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

在浏览器中运行JavaScript

Puppeteer还允许你在浏览器环境中执行JavaScript代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const result = await page.evaluate(() => document.title);

  console.log(`Page title: ${result}`);

  await browser.close();
})();

Puppeteer的优缺点

优点：

功能强大且多样：不仅仅是简单的浏览器控制，还能处理各种自动化任务。
无头模式：可以在不影响用户体验的情况下进行自动化操作。
维护良好且文档齐全：有广泛的社区支持和详细的文档。
脚本灵活：可以根据具体需求定制自动化场景。
应用广泛：适用于Web开发、测试、数据抓取等多个领域。

缺点：

学习曲线：需要理解JavaScript和Web开发的相关概念。
无头模式的复杂性：调试无头浏览器的问题可能比较困难。
资源消耗大：运行Chrome/Chromium可能对性能有一定影响。
潜在滥用风险：抓取网站数据可能违反相关的条款和条件。

44、高效处理CSV数据：Node.js中的CSV库

在开发过程中，我们经常需要处理CSV（逗号分隔值）数据，无论是导入、导出，还是进行数据转换和分析。Node.js中有一个非常流行的NPM包——csv，它专门用于处理CSV数据，提供了丰富的功能，帮助开发者轻松应对各种CSV数据处理需求。

CSV库的功能

csv库为处理CSV数据提供了以下主要功能：

解析CSV文件：将文本形式的CSV数据转换为数组或对象。
生成CSV内容：从JavaScript对象或数组生成CSV内容。
转换数据：在CSV结构内操作和调整数据。
流式处理大数据集：高效处理大型CSV文件，避免内存过载。
自定义选项：根据具体需求调整解析和生成行为。

CSV库的使用场景与示例代码

1. 解析CSV文件

假设你有一个CSV文件，想要将其内容解析为数组，可以这样实现：

const csv = require('csv');
const fs = require('fs');

const data = [];

csv.parse(fs.readFileSync('data.csv'), (err, row) => {
  if (err) {
    console.error(err);
  } else {
    data.push(row);
  }
});

console.log(data); // 输出代表CSV行的数组

2. 将数据生成CSV

如果你有一些用户数据，想要生成CSV格式的字符串，可以使用以下代码：

const csv = require('csv');

const users = [
  { name: 'John Doe', age: 30 },
  { name: 'Jane Doe', age: 25 },
];

const csvString = csv.stringify(users);

console.log(csvString); // 生成的包含用户数据的CSV字符串

3. 使用自定义函数转换数据

有时候我们需要在解析数据时进行一些处理，比如将年龄增加1，可以这样实现：

const csv = require('csv');

const transformAge = (row) => ({ ...row, age: Number(row.age) + 1 });

csv.parse('data.csv', { transform: transformAge }, (err, data) => {
  // data 现在包含了修改后的年龄值
});

CSV库的优缺点

优点：

广泛使用且可靠：作为一个成熟且受信赖的CSV处理包，得到了广泛应用。
功能丰富且多样：提供了全面的功能，能够满足各种需求。
高效且可扩展：通过流式处理能力，能够高效地处理大数据集。
易于使用：提供了简单明了的API和方法，方便上手。

缺点：

潜在的复杂性：高级功能可能需要深入理解解析和转换的概念。
有限的原生格式处理：对CSV单元格内的复杂格式处理能力有限。

总的来说，csv库是处理CSV数据的强大工具，能够帮助开发者高效完成CSV数据的解析、生成和转换。如果你在项目中需要处理大量的CSV数据，csv库无疑是一个非常值得信赖的选择。无论是小型项目还是需要处理大数据集的复杂应用，它都能胜任。

45、程序化创建PDF文档：Pdfkit库的魔力

在现代Web和应用开发中，生成PDF文档是一项常见需求。无论是生成报告、发票还是其他文档，PDF都是一种广泛使用且便于分享的格式。Pdfkit作为一个功能强大的Node.js库，为开发者提供了一个简洁的API，使得生成美观且功能丰富的PDF文档变得非常容易。

Pdfkit的强大功能

Pdfkit能够程序化创建PDF文档，提供了一系列功能，使得生成PDF变得简单高效：

创建基本PDF文档：生成简单的文本内容PDF。
添加格式和图像：支持设置字体、大小、颜色以及插入图像。
创建多页文档：轻松创建包含多页内容的PDF。

Pdfkit的使用场景与示例代码

1. 创建基本PDF文档

你可以使用Pdfkit生成一个包含简单文本的PDF文档：


const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();

doc.text('Hello, PDF world!');
doc.pipe(fs.createWriteStream('output.pdf'));
doc.end();

2. 添加格式和图像

如果你需要在PDF中添加格式化文本和图像，可以使用以下代码：


doc
  .fontSize(24)
  .text('Header', 150, 40)
  .image('path/to/image.jpg', { fit: [250, 250] })
  .moveDown(40)
  .text('This is some formatted text.', { bold: true })
  .moveDown(20);

3. 创建多页文档

生成一个包含多页的PDF文档也非常简单：


doc.addPage();
doc.text('This is on a new page.');

Pdfkit的优缺点

优点：

易于使用：提供了简洁明了的API，使得PDF生成非常简单。
功能全面：涵盖了PDF的基本元素和格式选项，满足大多数需求。
可定制性强：可以根据具体需求调整PDF的属性和布局。

缺点：

高级功能有限：缺少内置的高级功能，如水印、数字签名或注释。
依赖外部库：需要额外的包来安装字体和处理图像。

Pdfkit是一个非常实用的工具，适合各种PDF生成场景。无论你是在开发电子发票系统、生成报告还是其他需要PDF的应用，Pdfkit都能帮你高效地完成任务。

46、高效日志记录利器：Pino在Node.js应用中的应用

在Node.js应用开发中，日志记录是不可或缺的一部分。它不仅帮助开发者监控和调试应用，还能在出现问题时提供关键的诊断信息。Pino作为一个高性能的日志记录库，以其速度和效率为优先，同时提供了一系列丰富的功能，使得结构化和信息化的日志记录变得更加便捷。

Pino的强大功能

Pino能够为开发者提供以下关键功能：

高效日志记录：采用二进制格式，最大限度地减少对应用性能的影响。
结构化日志数据：将日志条目组织成键值对，增强可读性和分析能力。
控制日志级别：设置不同的详细程度（调试、信息、警告、错误），以捕捉相关信息。
自定义日志输出：支持多种格式，如文本、JSON和美化格式。

Pino的使用场景与示例代码

1. 基本日志记录

使用Pino可以轻松记录基本日志信息：

javascript复制代码
const pino = require('pino');

const logger = pino();

logger.info('应用程序启动成功。');
logger.warn('处理过程中发生意外错误。');
logger.error('关键故障，正在关闭应用程序。');

2. 结构化日志记录

通过键值对记录结构化日志，提升日志的可读性和分析能力：

javascript复制代码
logger.info({
  user: 'John Doe',
  action: '文件上传',
  filename: 'image.png',
});

3. 自定义日志格式

如果你希望以美化格式输出日志，可以使用pino-pretty：

javascript复制代码
const pretty = require('pino-pretty');
const pino = require('pino');

const logger = pino({ prettyPrint: true });

logger.info('这条日志信息将被美化！');

Pino的优缺点

优点：

性能优先：最小化对应用速度和资源使用的影响。
结构化且清晰的日志：通过键值对提高日志的可读性和分析能力。
灵活且可定制：适应不同的日志记录需求和格式。
广泛的集成：可以无缝连接各种平台和工具。

缺点：

二进制格式的复杂性：理解和调试二进制日志可能需要额外的努力。
学习曲线：初始设置和自定义可能需要一些学习时间。
内置过滤功能有限：内置的过滤选项可能不足以处理复杂场景。

Pino是一个性能优越且功能强大的日志记录工具，适用于各种Node.js应用。如果你需要一个高效、灵活且结构化的日志记录解决方案，Pino无疑是一个值得考虑的选择。无论是开发阶段的调试，还是生产环境中的监控，它都能为你提供可靠的支持。

47、灵活的身份验证中间件：Passport.js助你实现安全认证

在Web应用开发中，实现用户身份验证是一项关键任务。Passport.js作为一个强大的中间件，为开发者提供了一个灵活且模块化的框架，能够轻松集成多种身份验证策略，从而满足各种应用场景的需求。

Passport.js的强大功能

Passport.js能够帮助开发者实现以下功能：

验证用户：根据不同的来源（如数据库、社交提供商或自定义机制）验证用户凭证。
管理用户会话：在成功验证后，建立并管理安全的用户会话。
保护路由：根据用户的授权级别，限制对特定路由的访问。
支持多种策略：集成多种身份验证方法，如电子邮件/密码、社交登录、OAuth或基于令牌的方式。
可扩展和可定制：根据具体应用需求定制身份验证和授权工作流。

Passport.js的使用场景与示例代码

1. 基于电子邮件/密码的基本设置

以下示例展示了如何使用Passport.js设置基本的电子邮件/密码身份验证：


const express = require('express');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

const app = express();

// 定义用户验证逻辑
passport.use(new LocalStrategy((username, password, done) => {
  // ... 验证用户名和密码
  if (valid) {
    done(null, user);
  } else {
    done(null, false);
  }
}));

// 设置会话管理
app.use(passport.session());
app.use(passport.initialize());

// 保护特定路由（例如，仪表板）
app.get('/dashboard', passport.authenticate('local', { failureRedirect: '/login' }), (req, res) => {
  res.send('欢迎来到仪表板！');
});

app.listen(3000, () => console.log('服务器运行在端口3000'));

2. 集成Facebook社交登录

以下示例展示了如何使用Passport.js集成Facebook登录：


const FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
  clientID: 'YOUR_FACEBOOK_APP_ID',
  clientSecret: 'YOUR_FACEBOOK_APP_SECRET',
  callbackURL: 'https://yourdomain.com/auth/facebook/callback',
}, (accessToken, refreshToken, profile, done) => {
  // ... 处理Facebook资料数据并处理用户创建/登录
  done(null, user);
}));

Passport.js的优缺点

优点：

灵活性和控制：支持多种身份验证方法，允许根据具体需求进行定制。
模块化和可扩展：可以无缝集成其他模块，并提供插件灵活性。
安全可靠：实现了行业标准和最佳实践的用户身份验证。
庞大的社区和资源：全面的文档、活跃的社区和现成的插件。
广泛的应用范围：适用于各种需要用户身份验证和授权的Web应用。

缺点：

初始设置复杂：配置Passport和身份验证策略可能需要一些学习。
安全考量：实现安全的身份验证实践需要仔细规划和遵循最佳实践。
潜在的漏洞攻击：需要关注所选身份验证方法中的潜在安全漏洞。

总的来说，Passport.js是一个强大且灵活的身份验证工具，能够帮助开发者在Web应用中实现安全可靠的用户认证。如果你正在寻找一个能够支持多种身份验证策略并且可以根据具体需求进行定制的解决方案，Passport.js无疑是一个理想的选择。

48、简单高效的动态HTML生成：EJS模板引擎

在Web开发中，生成动态HTML是一个常见需求，而EJS（嵌入式JavaScript模板）正是一个流行的模板引擎，能够帮助开发者无缝地将动态内容集成到HTML模板中。它提供了一种简单高效的方式，使你能够在保持代码整洁的同时生成动态内容。

EJS的强大功能

EJS能够帮助开发者实现以下功能：

生成动态HTML：将JavaScript变量和对象的值注入到HTML模板中。
控制流逻辑：利用条件语句和循环，根据数据或用户操作控制内容显示。
保持代码分离：使HTML保持专注于展示层，而逻辑代码在单独的JavaScript文件中。
增强可重用性：创建可重用的模板组件，用于一致的页面元素。
支持服务端和客户端渲染：可以选择服务端渲染以优化SEO和预加载，或客户端渲染以实现交互应用。

EJS的使用场景与示例代码

1. 基本EJS模板

一个简单的EJS模板，展示如何插入动态内容：

html复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Welcome, <%= user.name %>!</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>Today is <%= new Date().toLocaleDateString() %>. You have <%= user.points %> points.</p>
</body>
</html>

2. 处理数据和循环

使用EJS处理数据和循环生成产品列表：


<!-- product.ejs -->
<h1>Product Listing</h1>
<ul>
  <% for (const product of products) { %>
    <li>
      <h3><%= product.name %></h3>
      <p>Price: <%= product.price %> USD</p>
    </li>
  <% } %>
</ul>


// app.js
// ... (express setup as in previous example)

const products = [
  { name: 'Product A', price: 9.99 },
  { name: 'Product B', price: 14.50 },
  { name: 'Product C', price: 22.95 }
];

app.get('/products', (req, res) => {
  res.render('product', { products });
});

3. 实现条件逻辑

使用EJS模板实现条件逻辑：


<!-- user.ejs -->
<% if (user.isLoggedIn) { %>
  <p>Welcome back, <%= user.username %>!</p>
  <a href="/logout">Logout</a>
<% } else { %>
  <p>Please <a href="/login">login</a> or <a href="/register">register</a>.</p>
<% } %>


// app.js
// ... (express setup as in previous examples)

const user = {
  isLoggedIn: true, // or false
  username: 'exampleUser' // or null
};

app.get('/user', (req, res) => {
  res.render('user', { user });
});

EJS的优缺点

优点：

简单易学：对基本使用仅需最少的JavaScript知识。
高效且代码整洁：将展示逻辑从HTML中分离，有助于维护代码库。
灵活且多功能：处理各种动态内容场景和渲染方法。
轻量且高性能：对应用性能影响最小。

缺点：

安全考量：不当的模板净化可能引入安全漏洞。
内置功能有限：复杂任务如表单处理或路由需要额外库。
潜在的XSS漏洞：在注入用户生成内容时需注意潜在的跨站脚本漏洞。

EJS是一个强大且灵活的模板引擎，适用于各种Web应用。如果你需要一个简单易用、功能强大的工具来生成动态HTML，EJS无疑是一个理想的选择。无论是小型项目还是大型应用，EJS都能为你提供高效的解决方案。

49、服务端HTML处理利器：Cheerio解析和操作HTML

在Node.js环境中，解析和操作HTML的需求非常普遍。无论是进行网页抓取、HTML测试，还是服务端渲染，Cheerio都能提供强大的支持。Cheerio是jQuery的一个子集的服务端实现，为开发者提供了熟悉的语法和API，用于在Node.js中导航、选择和修改HTML元素。

Cheerio的强大功能

Cheerio为开发者提供了以下关键功能：

网页抓取：无需浏览器即可从网站提取数据。
HTML测试：无需完整浏览器设置即可创建和测试HTML片段。
服务端渲染：在服务器上生成HTML内容，提升SEO和性能。

Cheerio的使用场景与示例代码

1. 选择和操作元素

使用Cheerio选择和修改HTML元素：


const cheerio = require('cheerio');
const html = '<h2 class="title">Hello, world!</h2>';

const $ = cheerio.load(html);
const title = $('.title').text();  // 获取h2元素的文本内容
$('.title').text('Goodbye, world!');  // 修改文本内容
console.log(title);  // 输出: "Hello, world!"

2. 提取数据

使用Cheerio从HTML中提取数据：


const html = '<ul><li>Item 1</li><li>Item 2</li></ul>';
const $ = cheerio.load(html);
const items = $('li').map((i, el) => $(el).text()).get();  // 获取所有li元素的文本内容
console.log(items);  // 输出: ["Item 1", "Item 2"]

Cheerio的优缺点

优点：

易于学习：对于有jQuery经验的开发者来说，语法非常熟悉。
快速高效：为服务端性能进行了优化。
强大的选择器：具备多样化的元素定位能力。
链式方法：代码简洁且富有表达力。
事件模拟：基本的测试能力。
可定制：可以通过插件进行扩展。

缺点：

不是完整的浏览器环境：缺少一些特定于浏览器的功能。
有限的事件处理：仅提供基本的模拟测试功能。
潜在的安全风险：处理不可信的HTML输入时需谨慎。

总的来说，Cheerio是一个非常强大且灵活的工具，适用于在Node.js环境中解析和操作HTML。无论你是进行网页抓取、HTML测试，还是服务端渲染，Cheerio都能帮助你高效完成任务。

50、高效自动化任务管理：Grunt让Web开发更轻松

在Web开发中，重复性的任务如代码编译、压缩、质量检查等往往耗时费力。Grunt作为一个JavaScript任务管理工具，通过自动化这些任务，极大地提升了开发效率。通过配置文件（Gruntfile），Grunt可以定义任务和插件，使开发流程更加流畅和高效。

Grunt的强大功能

Grunt能够帮助开发者实现以下功能：

编译和压缩：将代码转换为优化后的生产版本。
代码质量检查：强制执行代码质量标准并识别潜在错误。
自动化测试：运行自动化测试，确保代码的正确性。
文件合并和压缩：组合和压缩文件，以加快加载速度。
部署：将代码发布到Web服务器或其他环境。
文件变更监控：文件修改时自动重新运行任务。

Grunt的使用场景与示例代码

1. 压缩JavaScript文件

使用Grunt压缩JavaScript文件的示例：


// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        // 可选的UglifyJS选项
      },
      my_target: {
        files: {
          'dist/output.min.js': ['src/**/*.js']  // 压缩src目录下的所有JS文件
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

2. 检查JavaScript文件

使用Grunt进行代码质量检查的示例：


// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
      options: {
        // JSHint选项
      },
      all: ['src/**/*.js']  // 检查src目录下的所有JS文件
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('default', ['jshint']);
};

3. 监控文件变更并运行任务

使用Grunt监控文件变更并自动运行任务的示例：


// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    // ... 其他任务
    watch: {
      scripts: {
        files: ['src/**/*.js'],  // 监控src目录下的JS文件
        tasks: ['uglify', 'jshint']  // 文件变更时运行任务
      }
    }
  });

  // ... 加载插件
  grunt.registerTask('default', ['watch']);
};