grunt和前端模块管理工具的简单使用

时间 2020-03-16

原文原文链接

grunt的安装及使用教程

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

① 压缩文件
② 合并文件
③ 简单语法检查

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

$ sudo npm install -g grunt-cli
(加sudo貌似是osX10.10以后的版本才须要)

Grunt经常使用插件：html

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配置文件，配置任务或者自定义任务。前端

这两个文件必须放在项目的根目录，而且和项目文件一块儿提交java

安装package.json

咱们能够在终端经过npm init命令自动建立一个基本的package.json文件；能够直接使用package.json文件模板：node

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

注：react

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

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

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

package.json的用法

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

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

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

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

其他能够参照：https://github.com/ericdum/mu...webpack

安装gruntfile.js文件

咱们能够经过grunt-init来建立gruntfile.js文件，也能够经过如下模板手工建立：git

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编译后的代码，一样写在<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()模块。这里咱们将用through和duplexer模块建立一个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>

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文件，代码以下：

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

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文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</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(
            <div>
                <input type="text" value={value} onChange={this.handleChange}/>
                <p>{a}</p>
            </div>
        )
    }
});
var a = React.createElement('a',{
    className: 'link',
    href: 'https://www.baidu.com'
},'React');//<a class='link' href='https://www.baidu.com'>React</a>
ReactDOM.render(
    <Input/>,
    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/