grunt和NPM简介

2024-04-27 15:04:16

字体：大中小

来源：转载

供稿：网友

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查这个工具对我的某个项目目录里面的项目文件做一些操作，比如压缩、查错、合并等。Grunt 就是一种自动化任务处理工具，它就是一个工具框架，有很多插件扩展它的功能。Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个包，可以用 NPM 安装进行管理。所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。Grunt 帮忙实现下面几个功能：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。差不多就是这些，根据这些任务需求，需要用到：合并文件：grunt-contrib-concat语法检查：grunt-contrib-jshintScss 编译：grunt-contrib-sass压缩文件：grunt-contrib-uglify监听文件变动：grunt-contrib-watch建立本地服务器：grunt-contrib-connect它们的命名和文档都很规范，因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包，比如grunt-contrib-concat - npm 你也可以在这上面看到用法等。下面我们就要在这个项目中安装这些插件，执行命令：npm install grunt --save-dev表示通过 npm 安装了 grunt 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。可用的 Grunt 命令grunt dist （仅编译 CSS 和 javaScript 文件）重新生成 /dist/ 目录，并将编译压缩后的 CSS 和 Javascript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。grunt watch （监测文件的改变，并运行指定的 Grunt 任务）监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。grunt test （运行测试用例）在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。grunt docs （编译并测试文档中的资源文件）编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。grunt （重新构建所有内容并运行测试用例）编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。除错如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 /node_modules/ 目录，然后，再次运行 npm install 命令。

NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:$ npm -v2.3.0

上一篇：JavaScript 面向对象（一）

下一篇：Flex布局（1）