使用Grunt和Gulp实现JavaScript工作流自动化

当你刚接触前端开发时 并开始掌握 HTML5、CSS 和 JavaScript，下一步显然是 您手中的工具最 开发人员习惯在这个复杂的空间中保持理智。你也值得拥有更多 使用 Less 编写 CSS 表时的灵活性和功能。你也是 值得通过缩小 JS 代码来优化带宽。你也值得成为 能够使用 JSHint 自动检查您的 JS 代码是否良好。

你值得拥有这些好东西。

所以你开始使用所有这些很棒的工具 手动运行越来越多的命令行。有时，你会忘记 运行 Less 编译器...有时你忘记运行 JSHint 并且会出现错误...

突然你发现自己在想： 有没有解决方案可以自动化所有这些工具？你怎样才能创建一个 可重复的工作流程以防止您犯错误？

显然存在一个解决方案，并且有两个工具 特别是等待您开始使用：Grunt 和Gulp。

作为使用这些工具的新手，您 想知道它们如何工作以及使用哪一个，不是吗？嗯，那就完美了， 您正在阅读正确的文章！

1.我们将使用的示例

我会给你使用Grunt的基础 和 Gulp 使用一个非常简单的示例，您可以从 GitHub 下载该示例。

这是一个简单的网站，由三个部分组成 文件：

Styles.less 在 a 中定义 CSS 表 比使用标准 CSS 文件更丰富的方式。最后我们使用 Less 编译器创建 styles.css 文件。使用 Less，我们可以在 CSS 文件中使用变量：

在此入门指南中获取有关 Less 的更多信息。

立即学习“Java免费学习笔记（深入）”；

JavaScript 和 HTML 代码确实 简单的。该页面应如下所示：

2. 了解 Node.js 包管理器

您需要首先了解 Node.js 包管理器 (npm) 的工作原理。

Npm 是 Node.JS 附带的工具。它 用于获取工具和框架，同时自动解析它们 依赖关系。

例如，使用 Less 并编译它 到 Web 可用的 CSS 文件中，您首先需要使用以下命令安装 Less：

npm install -g less 登录后复制

上一篇：顶级免费 JavaScript 图表库

下一篇：使用 WordPress 顶部栏和通知栏插件增强用户参与度