Gulp | 纵享丝滑

Posted 2021-04-08 劉凯里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Gulp | 纵享丝滑相关的知识，希望对你有一定的参考价值。

First of All

建议直接下滑至文章底部，点击阅读原文，获取更好的阅读体验。

Node.js

首先是肯定要有node滴（这不是废话吗Orz...），如果还没有安装的话请自行询问你最喜欢的搜索引擎，相信她一定会很优雅的告诉你如何在或Windows或Mac或Linux上安装Node哒。

Initialize Your Project

进入项目的目录，然后↓

cnpm init

根据命令行的提示创建项目的package.json文件，当然了，你也可以自己手动创建这个文件（讲道理应该很少人会这么做吧...）。我用的是npm cnpm，它在国内可以完美的代替npm，并且获得更快的包安装速度，详情请访问淘宝镜像官网。

Install Gulp

接下来就要安装gulp了，首先进行全局安装 ↓

cnpm install -g gulp

全局安装的目的是为了通过它来执行gulp任务。 Next，本地安装 ↓

cnpm install --save-dev gulp

安装完成之后打开package.json文件，就会发现gulp被写在了devDependencies字段里，成为项目的开发阶段依赖。本地安装gulp的目的是为了成功的调用gulp插件。

Install Gulp Plugins

Gulp是一款用来实现自动化的构建工具，诸如压缩代码、合并脚本、自动刷新等任务，都是通过gulp在项目中调用各种各样的插件来实现的。正所谓工欲善其事必先利其器，工欲利其器必先get其器，先来安装这些插件吧 ↓

1	cnpm install --save-dev browserify vinyl-source-stream babelify babel-preset-es2015 babel-preset-react gulp-streamify gulp-uglifyjs gulp-connect

一口气装了这么多插件，他们都是干什么的呢？

1. browserify: 实现浏览器端的模块和依赖管理——约定用require()来引用模块，用module.exports来导出模块。

2. vinyl-source-stream: 这个插件的作用是转换流模式，如果我们需要将gulp及gulp插件和常规的可读流一起使用，就需要先把可读流转换为vinyl。

3. babelify, babel-preset-es2015, babel-preset-react: 用来编译es6以及react的jsx为浏览器可以识别的js。

4. gulp-streamify: 将当前插件的输出转化为可读流，使得其后的只能操作可读流的插件正常工作。

5. gulp-connect: 起服务器+自动刷新的一条龙服务。

6. gulp-uglifyjs: 看名字就知道了，丑化js。

Edit your Gulpfile.js

gulp会根据gulpfile.js这个文件去执行用户自定义的gulp任务，所以这是整个gulp构建中最重要的一步。 Talk is cheap, show u the code ↓

就是这样一个gulpfile.js文件，帮我们实现了先将es6和jsx编译成es5（反正是浏览器可以读懂的js）；再将代码打包成dist目录下的bundle.js并丑化之（当然，如果在开发过程中没有丑化代码的需求的话也可以不要这一步），所以在html文件中就只需要引用bundle这个js文件就可以了:)；最后实现了对代码的监听，若发生变动则自动重新打包再刷新浏览器，对手动刷新say goodbye，纵享丝滑。这里注意到在bundle任务中有一行任务被注释掉了，解释一下：因为项目依赖了React（react + react-dom），所以当执行完一次bundle任务后，在不压缩的情况下，打包成的bundle.js有1M左右，压缩后也有200k。这行被注释掉的代码，其作用就是在打包的时候忽略依赖的库或框架，这样就能大大缩小打包结果文件的体积，但是如果要这么做，你需要：

1. 在html文件中用script标签引入被忽略模块

2. 为package.json文件增加配置，说明需要忽略的模块：

{ "browserify-shim": { "react": "global:React", "react-dom": "global:ReactDOM"

}}

将所有的任务写在一个名为default的gulp任务内，保证在命令行只需要敲一个gulp就可以执行所有的任务。