gulp和yarn的二分钟包会教程

Posted 2021-01-05 moonzwt

 

1.什么是 gulp？

基于node的自动化构建工具

 

扩展：开发的时候分为2个节点一个是开发阶段  另一个是部署阶段

 

     开发阶段：源文件不会被压缩

     

     部署阶段：所有文件需要压缩

2.gulp能干什么？

1  自动压缩JS文件

2  自动压缩CSS文件

3  自动合并文件

4  自动编译sass

5  自动压缩图片

6  自动刷新浏览器

 

3.怎么安装gulp？

  因为它基于nodeJS，因此需要先安装node环境

  安装完成后，打开你的命令行窗口

  输入： node -v

  检测一下node是否安装好了

 

　　　　二分钟开始

1.使用npm安装插件命令
     ：npm install <name> -g  全局安装  //先全局安装
     ：npm install <name> --save-dev：局部安装  //一会使用

《npm install -g cnpm --registry=https://registry.npm.taobao.org》淘宝镜像>>cnpm安装

cnpm -v//装完查看版本，验证是否安装正确

　　

 

2.初始化文件夹
　　npm init 《npm init -y 如果卡住的话》
 
　　作用：初始化一个gulp环境   创建一个package.json文件

　　

 

3.局部安装gulp
　　　　cnpm install gulp --save-dev：局部安装
 
     　　--save：将保存配置信息至package.json
     
    　　 -dev：保存至package.json的devDependencies节点
     
 

　　

4.新建gulpfile文件(重要)
　　gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件
 
　　gulpfile   package   node_modules 三个文件一般放在一起

gulpfile.js

const gulp = require("gulp")//引入

gulp.task("script",function(){
    gulp.src("src/index.txt")
    .pipe(gulp.dest("dist/js"))
})

　　

　　终端输入

gulp script

　　

　　项目里面就OK了

　　

yarn

1.什么是 Yarn？

这里引用中文官网的说明： 
Yarn 是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。Yarn 是高效、安全和可靠的，你完全可以安心使用。

Yarn 能够让你使用其他开发者开发的代码，让你更容易的开发软件。如果你在使用中发现任何问题，欢迎发 issue 或者贡献代码，一旦问题被修复，你就可以继续使用 Yarn 战斗了。

代码是通过包（有时也被称为模块）进行共享的。 在每一个包中包含了所有需要共享的代码，另外还定义了一个 package.json 文件，用来描述这个包。

 

1、安装  cnpm install yarn -g
2.项目里面 yarn add gulp --dev

　　

 

和gulp对比的命令

1、安装  cnpm install yarn -g

2、cnpm install gulp --save === yarn add gulp 

3、cnpm install gulp --save-dev === yarn add gulp --dev

4、更新 cnpm update 包名 == yarn update 包名

5、yarn remove 包名 == npm uninstall 包名 删除包

6、yarn clear 清除缓存

7、yarn install  == cnpm install <别人搞你的项目如果里面没有module 直接下载json中的包>

8、 yarn init -y  == cnpm init -y