>

【必发88官网】gulp入坑体系,在线调节和测量检

- 编辑:www.bifa688.com -

【必发88官网】gulp入坑体系,在线调节和测量检

在线调节和测验方案的思辨与实践

2015/08/28 · HTML5 · 调试

原稿出处: 李靖(@Barret李靖)   

正文的主旨不在移动端调节和测量试验上,移动端调节和测验无非正是调治将养页面和调治工具之间存在抽离,消亡这种抽离并创办连结就能够缓慢解决移动端的调节和测试难题。注重阐释的是所见即所得的调节和测量试验形式下会碰着的阻拦。

当大家开荒网页,开掘二个模块未有科学地渲染只怕空白时,即使调整台有报错,会直接根据报错定位到源码地方上马 debug;假诺调节台未有报错,则会依照模块名可能模块特征的二个值,通过全局寻觅找到这一个模块之处,然后在调整工具中断点,单步调节和测验,找到难题所在,那时大家只怕会这么做:

情形一:

小A同学张开调控台,开掘断点调试不佳写代码,于是将压缩的源码复制豆蔻梢头份保存到本地,格式化,然后将线上能源通过代办工具代理到地点文件。

情形二:

小B同学早早的为友好配了生机勃勃份本地开荒条件,于是他撞见标题现在,直接去源码中固定错误地方,由于应用的是预管理语言,所以要求先打包编写翻译之后再在地头预览效果。

情形三:

小C同学的调节和测量试验形式是小A和小B的归结版本,将线上的财富代理到地头 build 目录文件,在 src 目录下矫正今后编写翻译打包到 build,然后预览。

fs模块(读写文件)

var fs = require("fs");//加载模块

//异步读取文件

fs.readFile("./readme.txt","utf8", (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync("./readme.txt","utf8");

console.log(data);

//异步写入文件

fs.writeFile("./test.txt", "This is test content~~~",(err) => {

if(err)throw err;

console.log("写入成功");

})

console.log("write");

//同步写入文件

fs.writeFileSync("./test.txt", "This is test content~~~");

console.log("write");

翻开路线消息stat:fs.stat(path, (err, stat) => {})

fs.stat("./test", (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log("该路线为文件");

}else if (stat.isDirectory()) {

console.log("该路径为文件夹");

}

})

  1. var index={};index={test:function(e){console.log("test")}},index.test();  
  2. var main={};main.test=function(n){console.log("main test")},main.test();  

☞ 在线调试实施(一个类别的调养工具)

输入须要调理的页面U讴歌MDXL(如 http://www.taobao.com):

必发88官网 1

插件会剖判 DOM,遍历得到页面全数被引述到的库房:

必发88官网 2

接收需求调治将养的模块(颗粒度细分到了html/js/css卡塔 尔(阿拉伯语:قطر‎,点击调节和测量检验按键,能够见见调节和测验页面包车型大巴财富都会引用本地下载的文件。

3.websocket 创设实时应用(你猜小编画,录制直播)

全双工、双向数据、长连接的说道,h5新扩充性子

服务器端能够主动向浏览器端发送消息

必须要浏览器要扶助,服务器要协助,数据传输格式是Frame

经过:第贰遍是由客商端发起,央求的报文的诉求头会多一些内容,必要服务器改动合同.

劳务器端响应回报文,响应头也会多几条数据,之后就能够创建长的连接.

a. 发起呼吁,跟日常的http央浼例外的地点,

请求头 包括:

Sec-WebSocket-Key:asgK0L1sVa22xbiq8MU58w==

Sec-WebSocket-Version:13

Upgrade:websocket

让服务器更新切换合同 websocket

b. 服务器收到央求,upgrade

透过一定的步子算法 发生

Sec-WebSocket-Accept:IQcF4EGKE8sALj3PxJRvYQ1iG2Y

2.  npm init

npm install socketio express --save-dev

在上朝气蓬勃篇里成功安装了gulp到项目中,今后来测量检验一下gulp的统生龙活虎与裁减成效

☞ 小结

优化流程、优化构造是我们全力持锲而不舍的来头,本文首要演说,编辑代码到调节和测量试验线上效果与利益的长河,建议明白决combo 和代码压缩等主题材料的方案和提出。希望能够给不擅长代理调节和测量检验的同学一点启示。

1 赞 收藏 评论

必发88官网 3

2.爬虫 cheerio

规律: 1.拉取页面(字符串)http.get/request(node),file_get_content(php)

2.施用模块,方便连忙筛选.cheerio(node), simple.html.dom.php(php)

3.募集新闻

npm install cheerio //安装cheerio模块

npm init

// spider.js

var http    = require("http");

var cheerio = require("cheerio");

var fs      = require("fs");

 

☞ 开启懒人调节和测量检验格局

当看见线上现身难题(或许是别的同学担负页面包车型地铁标题卡塔 尔(阿拉伯语:قطر‎,脑中浮出那般的光景:

复制代码 笔者:"嘿,线上卓殊啊!我要调度代码!" Computer:"好的,主人。请问是哪些页面?"(弹出浮层卡塔 尔(阿拉伯语:قطر‎ 作者:浮层中输入U科雷傲L。 计算机:"请问是哪位地点出题目了?" 小编:(指着计算机卡塔尔"模块A和模块B。" 计算机:正在下载A、B财富...正在将上线A、B映射到地点...自动展开A、B对应文件夹 作者:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在那间大家须求杀绝这样多少个难点

  • 将页面临应的有着货仓/财富罗列在客户近期
  • 下载能源的权力提示和权限管理
  • 线上财富解 combo,然后映射到地面

本来调节和测量检验之后,能够还也是有一个操作:

本人:"哈,已经修复了,帮本身付诸代码~" 计算机:正在diff代码...收到确认提交功率信号,提交到预发碰到...收到已经预览实信号...正在发布代码...收到线上回归信号...流程甘休

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

除此而外 debug 代码,大家必要做的就只是用眼睛看功用是或不是ok,整个流程优化下来,体验是异常的赞的!

http模块

var http = require("http"); //加载模块

var server = http.createServer((request, response) => {

//创建三个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case "/":

                    response.write("首页");

                     break;

case "/list":

response.write("列表页");

break;

case "/detail":

response.write("详情页");

break;

}

response.writeHead(200, {

"Content-Type":"text/html; charset=utf8"

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log("server has started at port 3000");

})

**npm install --save-dev gulp-concat   回车
**

☞ 化解代理碰着的主题素材

地点大家提到了多个难题,平常开垦遇到最高烧的一个是 combo ,曾经大家页面上的代码加一个?_xxx  参数就可以间接带头调节和测量检验情势,那是因为程序的入口唯有二个,何况装有脚本的注重也卷入到叁个叫做 deps.js  文件中,加上调节和测量检验参数之后,能够将本来 combo 加载的文件:  ,遵照非 combo 的主意加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

地点的代码可以轻便地代理到本地,可是部分系统生成的代码并不曾 deps.js  文件,它是将脚本直接出口到页面上:

<script src=";

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

此刻经过 Fiddler/Charles工具相比难满足要求,对于这一个标题有三个处理方案:

1). 浏览器央求全体代理到本地的二个劳务

首先写二个地面服务:

JavaScript

var http = require('http'); // npm i http-proxy --save var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { console.log(req.url); if(req.url.indexOf("??") > -1){ // combo能源让 3400 端口的服务处理proxy.web(req, res, { target: '' }); } else { // 直接回到 proxy.web(req, res, { target: req.url }); } }).listen(3399, function(){ console.log("在端口 3399 监听浏览器诉求"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require('http');
// npm i http-proxy --save
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: 'http://127.0.0.1:3400' });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的情趣是,利用 http-proxy 那几个 npm 包,代理浏览器的哀告,浏览器上运用 switchSharp 设置本地代理为  ,当号令过来,先判别url,假如 url 中包蕴了 ?? 则将其作为 combo 能源处理,代理给地点的另一个服务  ,那个服务收取乞求后会将 combo 内容分解成三个,全部央求完以往再吐出来。

2). 使用本地服务央浼 html 代码,替换 html 代码内容

行使强制手腕(源码替换卡塔尔国将代码解 combo,举个例子源码页面为:

<!-- html code --> <script src="; <!-- html code -->

1
2
3
<!-- html code -->
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!-- html code -->

应用本地服务诉求那些url,然后转变到:

<!-- html code --> <script src="; <script src="; <script src="; <!-- html code -->

1
2
3
4
5
<!-- html code -->
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!-- html code -->

达成那几个操作的代码:

JavaScript

var http = require('http'); // npm i request --save; var request = require('request'); http.createServer(function(req, res){ var path = req.url.slice(req.url.indexOf("path=") 5); console.log(path); if(!path) { res.write("path is empty"); res.end(); return; } request(path, function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); // 代码替换 body = body.replace('<script src=";', '<script src=" <script src=" <script src=";' ); res.write(body); res.end(); } }); }).listen(3399, function(){ console.log("listening on port 3399"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require('http');
// npm i request --save;
var request = require('request');
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace('<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>',
                '<script src="http://example.com/path/a.js"></script>
                <script src="http://example.com/path/b.js"></script>
                <script src="http://example.com/path/c.js"></script>'
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

举个例子说哀告  ,就可以得到天猫首页的源码,然后对获得的代码做替换。

☞ 灭亡代码压缩难题

对于那些主题素材,提议在线上放两份源码,意气风发份是削减源码,大器晚成份是未压缩源码,当页面 url 存在 debug 参数的时候,再次来到未压缩版本,符合规律再次来到压缩版本。当然,也得以应用上述办法管理难点。

不过,更客观的章程应该是 sourceMap,前端未有地下,压缩代码只是扩张了 骇客 的攻击花费,并不要紧碍有技能的 骇客借系统漏洞入侵。所以可以为源码提供风度翩翩份 sourceMap 文件。

JavaScript

var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() { gulp.src('src/**/*.js') .pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });

1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

至于 sourceMap 的 gulp 插件配置,实际情况能够戳这里。不止是 JavaScript,CSS 也可能有 source maps,这一个新闻能够在 Chrome 调整台的装置选项中看见:

必发88官网 4

☞ 代码的拉取

假若四个品类唯有你精通什么样改进,那那几个类型的本事安插就有一点点不佳了,为了让大家都能管理你项目中的难题,一定要索要二个简练的情势为开拓者飞速搭建测量检验情状,文书档案是壹头,如若有个风姿浪漫键操作的授命,那就更棒了!

# 运维脚本 start: createFile getMod getPage # 创立目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块旅馆,这里有几十二个,对比费时,请恒心等待... getMod: cd module; for i in $(MODS); do [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; git co -b master; git co -b $(MODSV); done # 拉取页面货仓,tbindex getPage: cd page; @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待...
getMod:
  cd module;
  for i in $(MODS); do
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i;
    git co -b master;
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page;
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

地点是三个 MakeFile 的局地代码,功效是创设开荒目录,拉取分支音讯,然后起首服务器,打开浏览器,使用 IDE 展开目录,万事就绪,只等主人敲代码。

漫天流程就大器晚成两分钟,完结开荒早前全部的备选专门的学业。那么些剧本不止是给和煦行使,如果其余人也亟需参与开拓,一个发令就能够让参加者步入支付格局,加上文书档案表达,省却了许多联系费用。

3.express 基于 Node.js 平台,急忙、开放、极简的 web 开采框架。

nmp install express -g

npm install express-generator -g(快速创设express的完全目录)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter....)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require("express"),//加载express模块

http = require("http"), //加载http模块

app  = express(), //创造多少个express实例

server  = http.createServer(app); //app能够看作http制造服务器的回调函数

//静态能源挂载,设置静态财富目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static("public"));

//定义叁个获取访问客户IP的中间件

//哪个先挂载,先接受哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log("hello");

next();

})

app.use(getIp);

app.use(responseIP);

app.get("/", (req, res) => {

res.send("首页");

})

app.get("/list", (req, res) => {

// console.log(req.ip);获取ip

res.send("列表页");

})

app.get("/details", (req, res) => {

res.send("详情页");

})

server.listen(3000, function() {

//监听端口号3000,并提示服务成功打开

console.log("Server has started");

})

总括express:中间件和路由.

在从前营造的门类中写入,在根目录新建js文件夹,并在文件夹中新建多少个js文件,代码如下:

☞ 代理调节和测量检验的烦躁

而对于比较复杂的线上情况,代理也会遇见不菲绊脚石,比如:

线上财富 combo

现身错误的剧本地址为  ,它对应着 a.js,b.js,c.js 八个剧本文件,若是咱们接纳 Fiddler/Charles那样的优质代理工科具调节和测量检验代码,就必需给那个工具编写插件,或许在交替配置内部加一群剖断大概正则,花费高,门槛高。

线上代码压缩

卷入压缩,那是上线此前的必经流程。由于我们在卷入的环节中并从未杜撰为代码加多sourceMap,而线上前边对应 index-min.jsindex.js 也因为安全地点的由来给干掉了,那给大家调试代码产生了大而无当的不平价。

代码重视超多,拉替代码难题

过多时候,大家的页面信赖了多个 asserts 财富,而那些能源各自分布在多少个旅社里面,以致散播在分歧的发表平台上,为了能够在源码灵宝天尊晰的调解代码,大家不能不将具有的财富下载到本地,时期假如存在下载代码的权力难点,整个调节和测验进程就慢下来,这是相当无法经受的事情。比如某系统构建的页面,页面上的模块都是以货仓为维度区分的,二个页面或然对应了5-肆20个旅舍,下载代码实为劳动。

最可怕的调弄整理是,本地未有对应的测量试验意况、代理工科具又不满足大家的要求,然后就必须要, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,倘使您的品类支出是这种形式,请停下来,思虑调试优化方案,正所谓必先利其器。

es6:

1.let/const

2.对象里的方法function能够简简单单

3.函数中的暗中同意参数

4.template

5.箭头函数

6.实行操作符

7.解构赋值

8.Symbol

9.class 模拟类,但真相是基于原型的

10.for ...of

11.promise 消弭回调金字塔.回调鬼世界

12.生成器函数,能够脱离函数

13.JS模块化

gulp入坑连串(1)——安装gulp(传送门卡塔 尔(英语:State of Qatar):

gulp

npm init

npm install gulp --save-dev

新建 gulpfile.js(暗中认可推行的文本)

//gulpfile.js

//1.布置职分, 2.机关推行

var gulp = require("gulp");

var uglify = require("gulp-uglify");

//task1 概念三个职分ufligy 压缩js

gulp.task("uglify" ,function() {

gulp.src("./src/js/*.js")

.pipe(uglify())

.pipe(gulp.dest("./dist/js"))

})

安装gulp-uglify插件 npm install gulp-uglify --save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

然后在dist文件夹就会找到已经回退的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*.less 文件的转换,变化运维该less职责

gulp.task("default", ["uglify", "less"], function() {

gulp.watch("./src/less/*.less", ["less"]);

})

//运维 gulp就能够就算退换代码

 

socketio 是对websocket合同封装的七个模块,让客商端和劳务器端的写法都是同风流罗曼蒂克的

socket.emit()发数据

socket.on()收数据

监听客商端连接,回调函数会传送此番连接的socket

io.on('connection',function(socket));

给具有客商端广播新闻

io.sockets.emit('String',data);

给内定的顾客端发送音讯

io.sockets.socket(socketid).emit('String', data);

监听顾客端发送的新闻

socket.on('String',function(data));

给该socket的客商端发送音信

socket.emit('String', data);

3.WebSocket

new Websocket("ws:localhost/chat")

安装完结后再一次施行gulp命令,成功后,能够查阅一下大家原来空的all.min.js文件,能够见到main.js和index.js已经在all.min.js中裁减合併了

path模块

var path = require("path"); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([...paths]) 拼接路线

var url = "";

var p1 = path.basename(url,".html");

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, "./a", "../b", "c");

console.log(p4); //E:nodenodejs_2bc

tips:gulp的实行流程接纳了流式操作,每贰个pipe()能够领略成,上二个操作的输出,正是下叁个操作的输入,举个例子uglify()压缩后输出的,正是concat要输入到文件中的,而concat输出的文本,是gulp.dest要插手的目录中的,能够理解成每部操作都return了下一步要选用的事物。

NodeJS:

1.node.js费用处境搭建

2.npm nodejs包微处理机

3.CommonJS模块化规范化,英特尔(require)

4.导出模块/加载模块

  1. <script type="text/javascript" src="build/all.min.js"></script>  

http协议:

HyperText Transport Protocol卡塔 尔(英语:State of Qatar)是超文本传输合同的缩写.

http须要:get/post/put/delete(get在地址栏,传输速度快,大小有限定.在头,只好传输一些文书;post加密传输,在正文)

能够倡导http央浼的措施:浏览器/postman/curl/Fiddle/php/node.js

http1.0和http1.1的区分:1.0是历次要求都创造二个总是,而1.1是多个需要三个连接.

报文:请求头(post有content-type:"application-x-www-form-urlencoded", cookie) 正文

xhr.readystate

XMLHttpRequest.UNSENT  0        开始化连接

XMLHttpRequest.OPENED  1        连接建设结构

XMLHttpRequest.HEADER_RECEIVED 2  选拔到诉求头

XMLHttpRequest.LOADING  3        处理数据

XMLHttpRequest.DONE    4        管理完成

xhr.status HTTP响应状态码

1最早  101 切换公约

2开头  成功  200

3开头  重定向  304 301/302

4方始  客户端错误  404 403

5始发  服务器端错误

必发88官网 5

querystring模块 查询字符串

var qs = require("querystring");

var o = {

color: "red",

border: "1px solid red",

"font-size": "16px"

}

var ret = qs.stringify(o, ";", ":");

console.log(ret);

// "color:red;border: 1px solid red;font-size: 16px"

main.js:

1.http伸手页面,不是该文件目录下的页面重定向,别的的依照目录查找

var http = require("http"); //CommonJS标准 加载模块

var fs = require("fs");

var path = require("path");

var server = http.Server(); //创制服务器

server.on("request", function(req, res) {

var filepath = path.join(__dirname, "./www", req.url);

if(req.url === "/") {

filepath = path.join(filepath, "index/html");

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader("Content0length", Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当必要的渠道是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

"Location" : "/"

})

}

res.end();

})

server.listen(3000, function() {

console.log("server has started");

})

  1. var gulp = require('gulp');//gulp自身  
  2. var uglify= require('gulp-uglify');//<span style="font-family: Arial, Helvetica, sans-serif;">引进压缩组件</span>  
  3. var concat = require('gulp-concat');//<span style="font-family: Arial, Helvetica, sans-serif;">引入归并建立</span>  
  4.   
  5. var paths = {  
  6.     scripts:['js/index.js','js/main.js']  
  7. } //定义要操作的文件路线  
  8.   
  9.   
  10. gulp.task('default', function() {   
  11.   gulp.src(paths.script)//找到项目下paths变量所定义的script文件  
  12.   .pipe(uglify())//压缩  
  13.   .pipe(concat('all.min.js'))//输入到all.min.js中  
  14.   .pipe(gulp.dest('build'));//钦命目录  
  15. });  

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd 文件加名

 

webpack

全局安装webpack npm install webpack --save-dev

新建文件夹webpack

1.早先化叁个品类 npm init

name:不能为webpack

2.在该文件夹上边设置npm install webpack --save-dev

  1. webpack 财富模块化

webpack ./app/main.js ./app/bundle.js

  1. mongodb 非关系型数据库

mongoose Nodejs操作mongodb数据库的模块

在根目录下新建index.html ,在中间引用build下的all.min.js。

 

接下去就能够在命令行工具中cd到项目标根目录中推行gulp指令了。

在根目录新建文件夹build,并在build里新建几个空的js文件:all.min.js

接下去编辑gulpfile.js文件,来报告gulp大家要把index.js,main.js归并起来压缩再写入all.min.js中

gulpfile.js:

npm install --save-dev gulp-uglify    回车

 

必发88官网 6

index.js:

 

 

 

最终目录构造如下:

然后运行一下我们的index.html,打开浏览器调整台,会发觉三个js的内容成功输出:

  1. var index={};  
  2. index={  
  3.     test:function(argument){  
  4.         console.log('test');  
  5.     }  
  6. }  
  7. index.test();  

 

  1. var main = {};  
  2. main.test=function(argument){  
  3.     console.log("main test");  
  4. }  
  5. main.test();  

 

那儿或许会产出 Cannot find module 'gulp-uglify'那样的报错,是因为gulpfile所require的gulp-uglify和gulp-concat插件并海市蜃楼,所以能够动用npm在档案的次序中装入就可以:

index.html:

证实gulp成功实行了JS文件的联合与减削的操作。

本文由必发88官网发布,转载请注明来源:【必发88官网】gulp入坑体系,在线调节和测量检