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-jshintjs代码检查
5).grunt-contrib-watch:文件监控

package.json和Gruntfile.js

package.json主要用于Node.js的包管理,比如Grunt插件安装;
Gruntfile.jsGrunt配置文件,配置任务或者自定义任务。

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

安装package.json

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

{ 
"name":"项目名称", 
"version":"项目版本号", 
"description":"项目描述", 
"author":"项目创建者", 
"license":"项目版权", 
"devDependencies": { 
//项目依赖插件 
    } 
}

注:

"dependencies": {},//生产环境
"devDependencies": {}//开发环境

package.json中最重要的就是nameversion字段。他们都是必须的,如果没有就无法install

package.json的用法

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

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

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

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

其余可以参照:https://github.com/ericdum/mujiang.info/issues/6

安装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-uglifyGrunt.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文件

github地址:https://github.com/gruntjs/grunt

broserify 的安装及使用教程

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

用 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可以直接插入网页。

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

一些常用选项:

--require, -r
--outfile, -o 
--entry, -e
--ignore, -i

你也可以引入相关文件通过以..开头的字符串,例如,从main.js载入load.js文件,在main.js文件中你可以这么做:

var foo = require('./foo.js');
console.log(foo(4));

如果foo.js是一个父目录,你可以用../foo.js替换:

var foo = require('../foo.js');
console.log(foo(4));

你可以使用module.exports来导出任意值,而不仅仅是函数。比如:

module.exports = 1234;

也可以这样:

var numbers = [];
for (var i = 0; i < 100; i++) numbers.push(i);

module.exports = numbers;

一些实例

你可以很容易地创建一个包,它将导出一个require()函数以便于你可以从其他script标签中require()模块。这里我们将用throughduplexer模块创建一个bundle.js

$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

然后在你的网页里你可以这样做:

<script src="bundle.js"></script>
<script>
  var through = require('through');
  var duplexer = require('duplexer');
  var myModule = require('my-module');
  /* ... */
</script>

api 实例

你也可以直接地使用使用API

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle().pipe(process.stdout);

browserify([files] [, opts])会返回一个browserify实例

grunt-browserify

你可以安装gruntbrowserify插件。

$ sudo npm install grunt-browserify --save-dev

官方github地址:https://github.com/substack/node-browserify

webpack的安装及使用教程

介绍

WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。

为了将模块化技术用于浏览器,人们造出了一大堆工具比如:RequireJSBrowserifyLABjsSea.jsDuo等。同时,由于Javascript的标准没有对模块的规范进行定义,所以伟大的程序员们又定义了一系列不同的模块定义,比如:CommonJSAMDCMDUMD等。

Webpack同时支持同步模式(CommonJS)和异步模式(AMD形式)的模块

webpack的优势:

安装方法

我们在全局环境的安装方法如下:

$ sudo npm install webpack -g

实例

首先在根目录创建一个名为test的项目文件夹,里面放一个main.js的文件,代码如下:

document.write("It works.");

再创建一个index.html文件,代码如下:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

这里的bundle.js是用webpack打包编译后生成的文件。执行编译如下:

$ webpack ./test/main.js bundle.js

然后就会在终端生成如下代码:

Hash: 4447402abfcd89f9daba
Version: webpack 1.9.7
Time: 78ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.44 kB       0  [emitted]  main
   [0] ./test/main.js 28 bytes {0} [built]

这时双击打开index.html文件就会看到It works.字样

剩下例子看这里:http://webpack.github.io/docs/tutorials/getting-started/

github地址:https://github.com/webpack/webpack

bower的安装及使用教程

介绍

Bower是一个Web开发的包管理软件。每当你需要比如jquery文件,angular.js等等文件时,你无须满世界去寻找,你只需要通过bower即可下载使用,bower也可以用来管理这些包之间的依赖。

功能有些类似于Component。不同之处是,Component是围绕GitHub系统构建的,而Bower既可以管理基于本地资源的包,也可以管理基于git系统的包。

安装方法

$ sudo npm install -g bower

我们可以使用bower安装各种模块。

    # 模块的名称
  $ bower install jquery
  # github用户名/项目名
  $ bower install jquery/jquery
  # git代码仓库地址
  $ bower install git://github.com/user/package.git
  # 模块网址
  $ bower install http://example.com/script.js

比如安装jquery,在终端输入:$ bower install jquery,就会在根目录生成bower_components/jquery文件夹

我们可以使用$ bowser update jquery来更新指定模块名称,或者bower unintsall jquery,不写名称则默认更新/卸载所有模块。

你也可以通过$ bower init 来保存你的bower.json文件中。bower.json是用来记录你的项目依赖的

bower 主要API:http://bower.io/docs/api/