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是要运行的命令。

其余可以参照：https://github.com/ericdum/mu...

安装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地址： https://github.com/gruntjs/grunt

broserify 的安装及使用教程

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

一些常用选项：

--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地址： https://github.com/substack/n...

webpack的安装及使用教程

介绍

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

为了将模块化技术用于浏览器，人们造出了一大堆工具比如：RequireJS、Browserify、LABjs、Sea.js、Duo等。同时，由于Javascript的标准没有对模块的规范进行定义，所以伟大的程序员们又定义了一系列不同的模块定义，比如：CommonJS、AMD、CMD、UMD等。

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: 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...

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

http://webpack.github.io/docs...

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客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面。

http://localhost: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');//React
ReactDOM.render(
    ,
    document.getElementById('example')
);

app.css文件

html{
    font-size: 10px;
}
p{
    font-size: 1.6rem;
}
input[type=text]{
    color: red;
    font-size: 1.2rem;
}

http://webpack.github.io/docs...

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

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/