程序员:Facebook Yarn初探,实现文件压缩混淆-文件压缩

前端程序员对npm已经很熟悉了,Yarn是Facebook开源的一个新型JavaScript包管理器,是Facebook和Tilde、 Exponent、Google 合作完成的项目。

程序员:Facebook Yarn初探,实现文件压缩混淆

它的出现是为了解决npm历史遗留的痛点。Yarn的官网支持中文,看来做的还是很细致。既然如此Yarn的主要亮点直接从官网截图了。

程序员:Facebook Yarn初探,实现文件压缩混淆

关注到Yarn是因其离线功能,据说能很方便的实现在离线机器上使用,所以决定试一试。至于和npm孰优孰劣就不讨论了。

以下命令是使用ubuntu 16.04系统,可以直接参考官方文档安装。

安装Yarn

  1. 打开终端,执行以下命令增加Yarn key和sources。

    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

  2. 安装。Yarn依赖nodejs,如果之前没有安装过,这步骤会自动安装。如果以前安装过nodejs,版本太低的话可能需要卸载重装哦,自动升级老是出问题。

    sudo apt-get update && sudo apt-get install yarn

  3. 输入 yarn --version,正确显示版本证明安装成功。注意Mac和Linux还需要参考官方指导export PATH,否则中间用起来就会遇到问题了。

初始化项目、添加压缩混淆依赖包

  1. 创建并进入示例的目录: mkdir gulp_test && cd gulp_test。

  2. 开启yarn离线模式。

    yarn config set yarn-offline-mirror-pruning true

  3. 初始化项目。执行 yarn init,这时系统会提示输入项目名字、版本等信息,命令运行成功后当前目录下会生成package.json和yarn.lock文件。

  4. 增加压缩和混淆CSS、JavaScript的gulp包。增加pump用于提示出错信息,这个包还是挺好用的。

    yarn add gulp gulp-uglify gulp-clean-css pump

  5. 命令运行成功后,各个依赖的包就下载到当前目录的node_modules下。

使用gulp压缩混淆JavaScript和CSS

在当前目录下创建gulp默认的执行文件gulpfile.js,这个平台的编辑器不支持代码,就写简单点上个图吧。

程序员:Facebook Yarn初探,实现文件压缩混淆

刚才没有设置gulp全局,就用nodejs直接运行gulp默认任务吧,命令如下。

nodejs node_modules/gulp/bin/gulp.js

拿以上生成的node_modules、package.json和yarn.lock文件就可以在离线机器上使用了,只是仍然需要在离线机器上使用deb方式安装nodejs和Yarn, 谢谢Facebook。

推荐阅读