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文件
github地址：
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可以直接插入网页。
一些常用选项：
--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()模块。这里我们将用through和duplexer模块创建一个bundle.js：
$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
然后在你的网页里你可以这样做：
module.exports 新建一名为main.js，黏贴如下代码：
module.exports = function (n,m) { return n*m;}; 在新建一名为test.js的文件：
var foo = require('./main');console.log(foo(5,10)); 然后终端输入：node test =>输出50
你可以使用module.exports导出任何你想输出的类型值。
module.exports相当于exports，但你不能使用exports = function(){}的形式.
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
你可以安装grunt的browserify插件。
$ sudo npm install grunt-browserify --save-dev
官方github地址：
webpack的安装及使用教程
介绍
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
为了将模块化技术用于浏览器，人们造出了一大堆工具比如：、、、、等。同时，由于Javascript的标准没有对模块的规范进行定义，所以伟大的程序员们又定义了一系列不同的模块定义，比如：、、、等。
Webpack同时支持同步模式(CommonJS)和异步模式(AMD形式)的模块
webpack的优势：
-
require.js的所有功能它都有 - 编绎过程更快，因为
require.js会去处理不需要的文件
安装方法
我们在全局环境的安装方法如下：
$ sudo npm install webpack -g
实例
首先在根目录创建一个名为test的项目文件夹，里面放一个main.js的文件，代码如下：
document.write("It works."); 再创建一个index.html文件，代码如下：
这里的bundle.js是用webpack打包编译后生成的文件。执行编译如下：
$ webpack ./test/main.js bundle.js
然后就会在终端生成如下代码：
Hash: 4447402abfcd89f9dabaVersion: webpack 1.9.7Time: 78ms Asset Size Chunks Chunk Namesbundle.js 1.44 kB 0 [emitted] main [0] ./test/main.js 28 bytes {0} [built] 这时双击打开index.html文件就会看到It works. 字样
剩下例子看这里：
CommonJS
服务器端的 Node.js 遵循 CommonJS规范，该规范的核心思想是允许模块通过 require 方法来同步
加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口。
require("module");require("../file.js");exports.doStuff = function() {};module.exports = someValue; AMD
Asynchronous Module Definition 规范其实只有一个主要接口 define(id?, dependencies?, factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置。
define("module", ["dep1", "dep2"], function(d1, d2) { return someExportedValue;});require(["module", "../file"], function(module, file) { /* ... */ }); 优点：
- 适合在浏览器环境中异步加载模块
- 可以并行加载多个模块
CMD
Common Module Definition 规范和 AMD 很相似，尽量保持简单，并与 CommonJS 和 Node.js 的
Modules 规范保持了很大的兼容性。
define(function(require, exports, module) { var $ = require('jquery'); var Spinning = require('./spinning'); exports.doSomething = ... module.exports = ...}) 优点：
- 依赖就近，延迟执行
- 可以很容易在 Node.js 中运行
对于全局安装的webpack，直接执行此命令会默认使用当前目录的webpack.config.js作为配置文件。
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
# 进入项目目录# 确定已经有 package.json，没有就通过 npm init 创建# 安装 webpack 依赖$ npm install webpack --save-dev//生成如下的代码 "devDependencies": { "webpack": "^1.12.9" } entry参数
定义了打包后的入口文件，可以是数组（所有文件打包生成一个filename文件），对象或者字符串
{ entry: { page1: "./page1", page2: ["./entry1", "./entry2"] }, output: { // Make sure to use [name] or [id] in output.filename // when using multiple entry points filename: "[name].bundle.js", path: "dist/js/page", chunkFilename: "[id].bundle.js" }} 该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下
output参数是个对象，定义了输出文件的位置及名字：
path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径 filename:打包后的文件名 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。
module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: 'jsx-loader?harmony' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理，小于8kb的直接转为base64 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] } Loader 可以通过 npm 发布和安装。
！用来定义loader的串联关系，”-loader”是可以省略不写的，多个loader之间用“!”连接起来，但所有的加载器都需要通过npm来加载。loaders接受查询参数，可以用于传递配置项给loader 我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。
我们可以根据模块类型（扩展名）来自动绑定需要的 loader。
将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：
$ webpack entry.js bundle.js --module-bind 'css=style!css'
安装 loader：
npm install css-loader style-loader
resolve
webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀。extensions 第一个是空字符串，对应不需要后缀的情况.
externals 当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，
这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：
externals: { "jquery": "jQuery" } 这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);
常用命令
webpack 最基本的启动webpack命令webpack -w 提供watch方法，实时进行打包更新webpack -p 对打包后的文件进行压缩webpack -d 提供SourceMaps，方便调试webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤webpack --profile 输出性能数据，可以看到每一步的耗时webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
Webpack开发服务器需要单独安装，同样是通过npm进行：
npm install -g webpack-dev-server
可以使用webpack-dev-server直接启动，也可以增加参数来获取更多的功能，
具体配置可以参见官方文档。默认启动端口8080，通过 localhost:8080
可以访问页面，文件修改后保存时会在页面头部看到sever的状态变化，并且会进行热替换，实现页面的自动刷新。
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
$ webpack --progress --colors
Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节，resolve 用来配置应用层的模块（要被打包的模块）解析，resolveLoader 用来配置 loader 模块的解析。
var webpack = require('webpack');module.exports = { entry: './entry.js',//入口文件 output:{ path: __dirname,//输出目录 filename: 'bundle.js'//输出文件名 }, //module 的作用是添加loaders module:{ loaders: [ { test:/\.css$/,//test属性匹配css文件 loader: 'style!css'//加载style和css loader } ] }, //Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。 plugins:[ new webpack.BannerPlugin('this file is created by trigkit4')//BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。 ], resolve: { fallback: path.join(__dirname, "node_modules") }, resolveLoader: { fallback: path.join(__dirname, "node_modules") }}; Webpack 中涉及路径配置最好使用绝对路径。
list of Loader
Babel-loader can transform JSX/ES6 file into JS file
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
你可以在webpack里require进来css文件，然后通过CSS-loader预处理css文件
webpack-dev-server webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。
webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载；在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面。
:8080/webpack-dev-server/index.html
使用inline模式：命令行方式
1) 命令行方式比较简单，只需加入--line选项即可。例如：webpack-dev-server --inline 插件
webpack+reactjs的使用
webpack.config.js文件：
var webpack = require('webpack');var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;module.exports = { entry: './entry.jsx', output: { filename: 'bundle.js' }, module:{ loaders:[ { test:/\.js[x]?$/, loader: 'babel-loader', exclude:/node_modules/, query:{ presets: ['es2015','react'] } }, { test: /\.css$/, loader: 'style-loader!css-loader?modules' } ] }, plugins: [ new uglifyJsPlugin({ compress: { warnings: false } }) ]}; package.json文件 { "name": "reactdemo", "version": "1.0.0", "description": "reactdemos", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "trigkit4", "license": "ISC", "dependencies": { "babel-preset-react": "^6.3.13", "react": "^0.14.5", "react-dom": "^0.14.5" }, "devDependencies": { "babel-core": "^6.3.26", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "webpack": "^1.12.9" }} index.html文件： entry.jsx文件 const React = require('react');const ReactDOM = require('react-dom');var style = require('./app.css');var Input = React.createClass({ getInitialState: function () { return{ value: 'hello' } }, handleChange: function(event){ this.setState({ value: event.target.value }) }, render: function(){ var value = this.state.value; return( {a}
) }});var a = React.createElement('a',{ className: 'link', href: 'https://www.baidu.com'},'React');//ReactReactDOM.render( , document.getElementById('example')); app.css文件 html{ font-size: 10px;}p{ font-size: 1.6rem;}input[type=text]{ color: red; font-size: 1.2rem;} github地址:
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：