grunt html模块化管理插件,grunt和前端模块管理工具的简单使用

grunt的安装及使用教程

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：

① 压缩文件

② 合并文件

③ 简单语法检查

Grunt的运行工具具有两个版本，一个是服务器端的版本(grunt)，另一个是客户端版本(grunt-cli)。这里我们主要使用客户端版本：

$ sudo npm install -g grunt-cli

(加sudo貌似是osX10.10之后的版本才需要)

Grunt常用插件：

1).grunt-contrib-uglify：压缩js代码

2).grunt-contrib-concat：合并js文件

3).grunt-contrib-qunit：单元测试

4).grunt-contrib-jshint：js代码检查

5).grunt-contrib-watch：文件监控

package.json和Gruntfile.js

package.json主要用于Node.js的包管理，比如Grunt插件安装；

Gruntfile.js是Grunt配置文件，配置任务或者自定义任务。

这两个文件必须放在项目的根目录，并且和项目文件一起提交

安装package.json

我们可以在终端通过npm init命令自动创建一个基本的package.json文件；可以直接使用package.json文件模板：

{

"name":"项目名称",

"version":"项目版本号",

"description":"项目描述",

"author":"项目创建者",

"license":"项目版权",

"devDependencies": {

//项目依赖插件

}

}

注：

Dependencies可选字段，指示当前包所依赖的其他包。

devDependencies可选字段。如果只需要下载使用某些模块，而不下载这些模块的测试和文档框架，放在这个下面比较不错。

在package.json中最重要的就是name和version字段。他们都是必须的，如果没有就无法install。

package.json的用法

description：放简介，字符串。方便我们在npm search中搜索。

keywords：关键字，数组、字符串。还是方便我们在npm search中搜索。

main：该字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫foo，然后用户安装它，然后require("foo")，然后你的main模块的exports对象会被返回。

scripts：这是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。

安装gruntfile.js文件

我们可以通过grunt-init来创建gruntfile.js文件，也可以通过以下模板手工创建：

module.exports = function(grunt) {

// 给grunt添加些设置

grunt.initConfig({

uglify: {

options: {

banner: '/*! 版权所有，这里乱写 */\n'

},

build: { src: 'src/core.js', //要压缩的源文件，我们也可以用*表示通配，比如'src/*.js'

dest: 'dst/core.js',//压缩后输出的位置，由于是在根目录，所以直接起个文件名就行

}

}

});

// 载入 "uglify" 插件任务

grunt.loadNpmTasks('grunt-contrib-uglify');//引号内部为插件名

//定义默认需要执行的任务

grunt.registerTask('default', ['uglify']);//uglify就是grunt任务

};

安装插件：

可以手动在package.json中添加Grunt的插件，也可以通过以下命令的方式向package.json文件中添加：

$ sudo npm install grunt插件名 --save-dev

实例：用Grunt进行压缩js代码

grunt-contrib-uglify是Grunt.js的一个任务模块，其基于著名的js压缩工具uglify，进行js压缩任务。

首先我们在项目依赖加上grunt-contrib-uglify。首先cd命令进入一个文件夹，然后安装该插件：

$ sudo npm install grunt-contrib-uglify --save-dev

在该文件夹根目录创建package.json文件如下：

{

"name": "test",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.1",

"grunt-contrib-uglify": "~0.2.0"

}

}

或者你也可以直接在终端输入npm init命令来安装。

接着输入npm install 命令来安装，你就会在项目根目录生成一个名为node_modules的文件夹，里面包含grunt和你安装的grunt插件

接着写gruntfile.js文件，你可以手工新建一个名为gruntfile.js的文件，也可以在终端输入grunt-init来创建

gruntfile.js的文件源码如下

module.exports = function(grunt) {

// 给grunt添加些设置

grunt.initConfig({

uglify: {

options: {

banner: '/*! 版权所有，这里乱写 */\n'

},

build: { src: 'jquery-1.9.1.js', //要压缩的源文件，我们也可以用*表示通配，比如'src/*.js'

dest: 'jquery-1.9.1.min.js',//压缩后输出的位置，由于是在根目录，所以直接起个文件名就行

}

}

});

// 载入 "uglify" 插件任务

grunt.loadNpmTasks('grunt-contrib-uglify');//引号内部为插件名

//定义默认需要执行的任务

grunt.registerTask('default', ['uglify']);//uglify就是grunt任务

};

我们在项目根目录放入一个名为jquery-1.9.1.js的文件，接着在终端输入：

grunt

来执行整个项目文件，grunt则会自动完成任务，这时你就会看到根目录生成了一个被压缩过的query-1.9.1.min.js文件

broserify 的安装及使用教程

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。在浏览器中，调用browserify编译后的代码，同样写在

用 Browserify 的操作，分为3个步骤。

1. 写`node`程序或者模块

2. 用`Browserify` 预编译成 `bundle.js`

3. 在`HTML`页面中加载`bundle.js`

安装方法

mac平台：$ sudo npm install -g browserify

其他平台：$ npm install -g browserify

用法

首先新建一个名为main.js的文件，粘贴如下代码：

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

然后安装uniq模块：

$ sudo npm install uniq

其他平台去掉sudo即可

输出文件：

$ browserify main.js -o bundle.js

或者：

browserify main.js > bundle.js

也可以使用node输出这段程序：

$ node main.js

生成的bundle.js可以直接插入网页。