gulp+webpack+babel

一

1、安装nodejs

官网：https://nodejs.org/en/
命令：

node -v #查看安装的nodejs版本，出现版本号
npm -v #查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器

2、外部文件引用

1) lib文件：

exports.函数名 或者 module.exports.函数名 = function() {
    //...
}
exports.变量名 = 值

2) require引用：

var getLib = require("脚本文件路径/内置模块名/外部模块名");
getLib.函数名();

执行流程：
1、看看它内置模块中是否有，如有优先加载内置模块
2、如果没有则看是否是“路径级”的引用
3、以上都不是则会在node_modules去寻找同名文件夹

进入第三步后，会默认寻找 index.js，如果没有则会查看 package.json 是否做了 main 定义

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

3、Npm使用

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。
官方包镜像网站：https://www.npmjs.com/

1） 使用npm安装插件
在项目根目录下执行：npm install <name> [-g] [--save-dev]，安装成功会在项目根目录自动创建 node_modules 文件夹，其中包含所有安装的模块

• name：node插件名称。例：npm install jquery@1.11.0 --save-dev（@代表指定版本）
• -g：全局安装，将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用
• –save：将保存配置信息至package.json（package.json是nodejs项目配置文件）
• -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等

Q：为什么要保存至package.json
A：因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。

2）使用npm卸载插件
在项目根目录下执行：npm uninstall <name> [-g] [--save-dev]

• 删除多个插件：npm uninstall gulp-less gulp-uglify gulp-concat ……
• 借助rimraf：npm install rimraf -g 用法：rimraf node_modules

3） 使用npm更新插件
在项目根目录下执行：npm update <name> [-g] [--save-dev]

• 更新全部插件：npm update [--save-dev]

4） 查看npm帮助
npm help

5） 当前目录已安装插件
npm list

PS：npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常）

4、安装cnpm / 设置淘宝镜像源

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”

官网：http://npm.taobao.org

1） 方法1

npm install cnpm -g --registry=https://registry.npm.taobao.org

PS：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

2） 方法2
编辑 nodejs / node_modules / npm / .npmrc 文件，在最后加入：

registry=https://registry.npm.taobao.org

5、nodejs模拟编译生成js文件

var getlib = require('mylib1');
var getfile = require('fs');

getfile.writeFile('build.js','');
for(var key in getlib) {
    //console.log(key+'-'+getlib[key]);
    getfile.appendFile('build.js', genCode(key, getlib[key]));
}

function genCode(key, value) {
    return 'var ' + key + '=' + value + ';\n';
}

fs：专门用来处理文件的内置模块
var file=require(‘fs’) ;
file.readFile / readFileSync：读文件（异步/同步）
file.readdir / readdirSync：读文件夹（异步/同步）
file.writeFile：写文件
file.appendFile：追加文件

6、获取当前脚本的所有对象

Nodejs顶层对象：global
只需要循环 global.process.mainModule.children 这个子对象即可

 for(var i=0;i< global.process.mainModule.children.length;i++)
 {
   var child=global.process.mainModule.children[i];
   for(var key in child.exports) //child.exports就是我们导出的属性
   {
       //...
   }
 }

7、使用正则

var pattern=/['|"](.*\.jpg)['|"]/g;
while(var res=pattern.exec(data.toString()))
{
    // res[0]：匹配到的内容
    // res[1]：分组内容
}

8、将图片转化为base64

首先通过 readFile() 把图片读取出来，然后执行：getImg.toString('base64')
css加载格式：background:url(“data:image/jpg;base64,xxx”)

9、Nodejs请求（CURL）

1） 安装 request 库：npm install request --save-dev
2） 调用

var request = require('request');
exports.loadNews = function(callback) {
    request.get('http://127.0.0.1/nodejs/t1/server/news.php', function(err, response, body){
        if(!err && response.statusCode==200) {
            // 执行成功
            callback(body); 
        }
    });
}

10、Json

Nodejs内置了一个 JSON 对象：

JSON.parse(str);    //把json字符串转化为对象并返回
JSON.stringify(obj);    //把对象转化为字符串并返回

11、EJS模板引擎

官网：http://www.embeddedjs.com/
下载：npm install ejs --save-dev

1）模板页面：

<h3><%=title%></h3>
<p><%=content%></p>
<ul>
    <% for(var i in list){ %>
        <li><%= list[i].name %></li>
    <% } %>
</ul>

2） 渲染模板：

var fs = require('fs'); // 引入文件操作库
fs.readFile('./index.html', function(err, get_template){
    if(!err) {
        // 读取模板文件成功
        get_template = get_template.toString(); // 文件内容转为字符串
        var ejs = require('ejs'); // 引入ejs库
        var template_data = { // 创建数据源
            'title' : 'test title',
            'content' : 'content......',
            'list' : [
                {'title' : 'zhangsan'},
                {'title' : 'lisi'},
                {'title' : 'wangwu'},
            ]
        };
        var html = ejs.render(get_template, template_data); //渲染模板
        console.log(html); // 输出最终内容
    }
})

二

1、安装gulp

gulp是基于 Nodejs 的自动化构建工具（任务运行器），它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作

1） 在项目根目录下创建package.json

npm init

2） 安装

npm install -g gulp // 全局安装
npm install gulp --save-dev // 当前项目安装 
npm -v 

3）测试
在项目根目录下创建gulp配置文件：gulpfile.js

var gulp = require('gulp');
gulp.task('t1', [options], function(){
    console.log('task 1...');
});

执行：gulp t1

2、gulp函数

1） gulp.src([文件1,文件2,文件3])
用来”收集”源文件形成“虚拟文件对象流”，然后通过“管道”函数 pipe 传给它另外一个写文件的函数 dest，如：

gulp.src([“1.js”,”2.js”]).pipe(gulp.dest(“文件夹名”);
gulp.src([“*.js”,”!2.js”]).pipe(gulp.dest(“文件夹名”);  // 使用通配符

通配符：
*：匹配所有文件 例：a/*.js（包含a下的所有js文件）
**：匹配0个或多个子文件夹 例：a/**/*.js（包含a的0个或多个子文件夹下的js文件）
{}：匹配多个属性 例：{a,b}.js（包含a.js和b.js文件）；src/*.{jpg,png,gif}（src下的所有jpg/png/gif文件）
!：排除文件 例：!a.js（不包含a.js文件）

3、gulp插件

1） 合并插件：Npm install gulp-concat --save-dev

var concat=require(“gulp-concat”);  //引入
gulp.src([文件列表]).pipe(concat(“合并后的文件”).pipe(gulp.dest(“目录”))

2） 压缩插件：npm install gulp-uglify --save-dev

var uglify=require(“gulp-uglify”);  // 引入
gulp.src([文件列表]).pipe(uglify().pipe(gulp.dest(“目录”))

3）关联 gulp 和 webpack 的插件：npm install gulp-webpack --save-dev

var gulp_webpack = require('gulp-webpack'); // 引入
var config_gulp_webpack = require('./webpack.config.js');   // 设置webpack配置文件
var webpack = require('webpack');   // 设置独立的webpack
gulp.src([文件列表]).pipe(gulp_webpack(config_gulp_webpack, webpack))
    .pipe(uglify().pipe(gulp.dest(“目录”));

也可以直接在 gulp 中调用 webpack：

var config_gulp_webpack = require('./webpack.config.js');   // webpack配置文件
var webpack = require('webpack');   // 外部webpack
gulp.task('run', function(){
    // 调用webpack
    webpack(config_gulp_webpack, function(err, status){

    });
});

4）简单模板插件：npm install gulp-template --save-dev

var gulp_template = require('gulp-template');   // 引入
gulp.src([文件列表]).pipe(gulp_template({
        key : value
    }))
    .pipe(gulp.dest(“目录”));

在模板文件中使用：

<%=key%>

5）文件重命名插件：npm install gulp-rename --save-dev

var gulp_rename = require('gulp-rename');   // 引入
gulp.src([文件列表]).pipe(gulp_rename(新名称)).pipe(gulp.dest(“目录”));

6）ejs模板引擎插件：npm install gulp-ejs --save-dev

var gulp_ejs = require('gulp-ejs'); // 引入
// 创建数据源
var template_data = { 
    'title' : 'test title',
    'content' : 'content......',
    'list' : [
        {'title' : 'zhangsan'},
        {'title' : 'lisi'},
        {'title' : 'wangwu'},
    ]
};
gp.src([文件列表]).pipe(gulp_ejs(template_data)).pipe(gulp.dest(“目录”));

4、安装Webpack与配置

前端构建框架（模块打包）webpack 遵循 CommonJS 规范（http://commonjs.org），它能帮我们把本来需要在服务端运行的JS代码，通过模块的引用和依赖打包成前端可用的静态文件。

1） 安装

npm install webpack -D  // 项目安装
npm install -g webpack  // 全局安装

webpack@4 之后 cli 移到了新包 webpack-cli，还需要安装它：

npm install webpack-cli -D  // 项目安装
npm install -g webpack-cli  // 全局安装

2） 基本配置
在项目根目录下创建配置文件 webpack.config.js：

var path = require("path");
module.exports = {
    mode: 'production', // 调试模式：development | production
    entry:[    //entry 是入口文件，可以多个，代表要编译那些js
        './a.js'
    ],
    output: {
        path: path.resolve(__dirname, './build/js'),  //输出文件夹
        filename: 'build.js'   //最终打包生成的文件名
    }
}

3）全局引用库

var webpack = require('webpack');
module.exports = {
    plugins:[
        new webpack.ProvidePlugin({
            $ : 'jquery' //这里请确保你的jquery已经安装了,否则要路径引用
        })
    ]
}

4）多节点打包与分离

webpack 4.0.0-beta.0删除了 CommonsChunkPlugin，以支持两个新的选项（optimization.splitChunks 和 optimization.runtimeChunk）。

var path = require("path");
module.exports = {
    entry:{
         main : './src/main.js',
         user : ['./src/login.js', './src/reg.js']
    },
    output: {
        path: path.resolve(__dirname, './build/js'), // 打包后所放的路径,
        filename: 'build_[name].js'   
    },
    optimization : {
        minimize: false,
        splitChunks : {
            chunks: "all",
            cacheGroups: {  // 这里开始设置缓存的 chunks  
                default : false, 
                vendor : false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    }
}

webpack automatically splits chunks based on these conditions:

• New chunk can be shared OR modules are from the node_modules folder
• New chunk would be bigger than 30kb (before min+gz)
• Maximum number of parallel request when loading chunks on demand would be lower or equal to 5
• Maximum number of parallel request at initial page load would be lower or equal to 3

When trying to fullfill the last two conditions, bigger chunks are preferred.

5）外部扩展 Externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

例如，从 CDN 引入 jQuery，而不是把它打包：

index.html

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

webpack.config.js

module.exports = {
     externals: {
        'jquery' : 'jQuery' // 或$（Window.jQuery == Window.$）
    },
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行

import $ from 'jquery';    // 引入外部的jquery 
// 或 var $ = require('jquery');
$('.my-element').animate(...);

5、WebPack插件

1）html-webpack-plugin：npm install html-webpack-plugin --save-dev

参考地址：https://github.com/webpack-contrib/html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入
module.exports =
{
    entry:{
         main : './src/main.js',
         user : ['./src/login.js', './src/reg.js']
    },
    output: {},
    plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/login.html', // 生成路径
            template: __dirname+'/src/tpl/login.html', // 模板路径
            inject:'body', // 生成到页面的位置：head | body(默认)
            hash:true // 如果为true会给所有script和css添加一个唯一的webpack编译hash值
            chunks:['mian','user'] // 按需加载chunks，如果js文件中引入了css文件，也会被一同加载（对应entry节点的key）
        })
    ]
}

2）style-loader 和 css-loader（将css内嵌到脚本中）

参考地址：
https://github.com/webpack-contrib/style-loader
https://github.com/webpack-contrib/css-loader

npm install style-loader --save-dev // 将模块的导出作为样式添加到 DOM 中
npm install css-loader --save-dev   // 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

index.html

require('./css/main.css');
// 或
import style from './css/main.css';

webpack.config.js

module.exports = {
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'}
                ]
            }
        ]
    }
}

3）extract-text-webpack-plugin（分离css文件）：npm install extract-text-webpack-plugin --save-dev

参考地址：https://github.com/webpack-contrib/extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
}

它会将输入块中所有必需的*.css模块移动到单独的CSS文件中。 所以你的样式不再被内联到JS包中，而是在一个单独的CSS文件（ styles.css ）中。 如果您的样式表总量很大，那么它会更快，因为CSS包与JS包并行加载。

webpack4会报如下错误：

解决方法：执行 npm install extract-text-webpack-plugin@next

4）raw-loader（以字符串的方式读取文件）：npm install raw-loader --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

在你的项目中

var getHeader = require('./header.include');
// 或 import getHeader from './header.include';

// 如果不在webpack配置文件中配置，可以在引入时指定加载器
var getHeader = require('raw-loader!./header.include');

5）url-loader（使用base64编码加载文件）：npm install --save-dev url-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 81920
            }
        }
      }
    ]
  }
}

然后可以在被脚本引入的css文件中加载图片：

#test{
    background: url("./a.jpg"); // a.jpg会被webpack自动编码为base64格式
}

6、分离公共头文件

header.include

<div id="header">
    <span>this is header！这是头文件yeh!</span>
</div>

1）使用脚本动态加载头文件

main.js

var getHeader = require('raw-loader!../../tpl/header.include'); // 引用raw-loader
$('body').prepend(getHeader);  // 动态添加

2）使用htmlWebpackPlugin模板

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<%=require('raw-loader!./header.include')%> <!-- webpack会自动替换为模板内容 -->
<h1>Hello, Index!</h1>
</body>
</html>

3）使用htmlWebpackPlugin变量

webpack.config.js

module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            filename: __dirname+'/build/html/index.html',
            template: __dirname+'/src/tpl/index.html',
            inject: 'body',
            hash: true,
            chunks: ['main','testLib1'],
            // 自定义属性
            include : {
                header : require('fs').readFileSync('./src/tpl/header.include')
            }
        })
    ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<%=htmlWebpackPlugin.options.include.header%>
<h1>Hello, Index!</h1>
</body>
</html>

三

1、babel母体安装

1）首先确保根目录有 package.json 文件
本地安装：npm install --save-dev babel-cli
使用本地安装的好处：

1. 同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
2. 这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。

2）使用
我们将把我们的指令放在本地版本的 npm 脚本中，而不是直接通过命令行来运行 Babel.
简单的在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中。

  {
+   "scripts": {
+     "build": "babel index.js -o index-build.js"
+   }
  }

从终端执行：npm run build

2、安装Env preset

根据你支持的环境自动决定适合你的 Babel 插件的 Babel preset。它使用了 compat-table

本地安装：npm install babel-preset-env --save-dev
然后在项目根目录创建 .babelrc 配置文件：

{
  "presets": ["env"]
}

3、使用 webpack 联合 babel 编译

1）本地安装 babel-loader：npm install babel-loader --save-dev
2）配置 webpack.config.js

module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        }
      ]
    }
}