首先要明确一点: gulp和webpack是两个层面上的东西

一: gulp是什么 ?

gulp的设计哲学: 管道流 + 任务调度, 本身不会做任何事情.

  • 管道流: 相当于一个管道,里面流动的是数据.
  • 任务调度: 每一次使用pipe的时候,就是我们要做一件事情.

gulp只负责任务的执行(task runner),至于是什么样的任务,由你自己决定.

二: webpack是什么 ?

核心功能:模块地组织、模块化地依赖、模块地打包

  1. 按照模块的依赖构建目标文件
  2. loader体系支持不同的模块.
  3. 插件体系更多额外的功能.插件是用node.js编写的一个模块,然后导出的是一个函数,使用的时候调用它就行了.
  1. const gulp = require('gulp');
  2. const webpack = require('gulp-webpack');
  3. gulp.task('default', function() {
  4.   return gulp.src('xxx/xxx.js')
  5.     .pipe(webpack())
  6.     .pipe(gulp.dest('dist/'));
  7. });

三: 打包和压缩

  1. 打包:
  • 模块: 一切皆模块,将我们整个应用在开发的时候所涉及到的代码拆分成很多个模块(函数)
  • 分完之后的好处就是写代码很爽,但是上线的代码不可能分成N个模块,因此在上线的时候就需要将这些分散的模块合起来,这个过程我们就叫打包(根据入口,然后找到他的依赖,将他们处理成一个文件)
  1. 压缩: 上线的时候我们需要考虑优化,那么资源大小肯定是一个问题

四: yarn和npm

当我们使用npm或者yarn去install一个内容的时候为什么会报错 ?

当我们npm install xxx之后发生了什么?

  • 去一个仓库找到要装的包
  • 这个包就是我们使用node.js开发的一个功能,里面会有一些必要的文件, eg: package.json, lib, index.js…
  • 找到这个包之后就会将它里面的内容拷贝到node_modules里,有时候还需要执行安装
  • 如果这个过程有错误
    • 仓库地址无法访问(开代理、配镜像)
    • 被下载的包资源无法访问(配置.npmrc文件)
    • 被下载的包资源回来之后无法安装(当前包有可能又使用了其他的二进制资源)
      • 有些时候我们在安装包的最后,会看到一个字样: node install.js
  • 分析
    • 当我们在命令中执行npm install node-sass的时候,如果说我们配置了淘宝镜像,那么这个包的内容下载一定会成功
    • 对于这个包来说,它的源码在工作的时候又需要用到另一个二进制文件, 但由于这个文件的需求不是写在依赖关系里的,所以在npm的时候不会加载,它要在包工作的时候才能被发现,因此,这个时候还要将这个东西找回
    • 这个时候由于种种原因,当前被找的这个东西我们一般会下载失败
    • A(找到A的源码,把它搞下来)

五: node初识

  1. // 读文件
  2. const fs = require("fs");
  3. // Buffer 数据类型, 在node.js中用于操作二进制,它就是一片内存空间
  4. // 读文件(此时我们就可以使用js将磁盘中的某一个文件内容读取出来了)
  5. fs.readFile("xxx/xx.txt", (err, data) => {
  6.   console.log(data.toString());
  7. })
  9. // 写操作, 写入磁盘
  10. fs.writeFile("xxx/xxx.txt", "hahah", err => {
  11.   console.log("hao shen qi a ");
  12. })
  13. // 不适用于大文件操作
  15. // 怎么办:
  16. // 自己申请空间[此处的内存大小虽然由我们自己申请,但是不能自己delete]
  17. let buf = Buffer.alloc(100);
  18. fs.open("xxx/xx.txt", (err, fd) => {
  19.   // node 中的fd是将多个平台上的文件操作符抽象之后的内容,称为标识符
  20.   // 利用这个fd系统最终可以找到一个对应的文件.
  21.   // 默认情况下从3 开始 , 因为在node中有标准输入,标准输出, 标准错误
  22.   console.log(fd); // 3
  23.   // fd 用于指定读取哪个文件里的数据
  24.   // buf 用于指定将数据写到哪片空间里
  25.   // 1 表示从buf的哪个位置上写
  26.   // 3 表示当前次读取字节数
  27.   // 0 表示从fd的哪个位置开始读
  28.   fs.read(fd, buf, 1, 3, 0, (err, bytesRead) => {
  29.     console.log(bytesRead);
  30.     console.log(buf.toString());
  31.   })
  32. })
  34. buf = Buffer.from("kai xin xue xi");
  35. // 写操作: 
  36. fs.open("xxx/xxx.txt", "w", (err, fd) => {
  37.   // 这里的写就是指从 内存中读取出来,然后写入指定的磁盘文件里
  38.   fs.write(fd, buf, 3, 3, 1, (err, written, buffer) => {
  39.     console.log("写操作成功");
  40.   })
  41. })
  1. 流: 是先于node出现的一个技术,这个技术是用于处理数据的, 而node只不过是内部实现了它的一些操作接口,有一个模块叫 stream.
    • 这个模块中提供了四种类: readable、writable、duplex、transform
  1. const fs = require("fs");
  2. let rs = fs.createReadStream("xxx/xxx.txt");
  3. let ws = fs.createWriteStream("xxx/xxx.txt");
  4. rs.pipe(ws);
  5. // createReadStream和createWriteStream流属于fs模块,继承了stream,所以可以用于流操作
  6. // 1. pipe左侧一般是可读流,就是数据的生产者, 右侧就是可写流,用于数据消费
  7. // gulp中所有的插件都可以转换流,是实际应用中使用最多的一种流,可读可写可操作
  8. // gulp插件其实就是node.js写的一个转换流, 导出即可