gulp安装&简单使用

最新推荐文章于 2023-03-22 21:36:16 发布

weixin_43297321

最新推荐文章于 2023-03-22 21:36:16 发布

阅读量262

点赞数

分类专栏： gulp 文章标签： gulp gulpfile

本文链接：https://blog.csdn.net/weixin_43297321/article/details/107078970

版权

gulp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介

gulp是前端开发过程中，自动化构建工具。不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

在实现上，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

二、gulp环境搭建

链接文章：gulp官方文档

1、安装nodejs

安装方式：打开nodejs官网（https://nodejs.org/en/），下载所需版本（.msi文件）。

如果想要全局范围内使用，可以将其配置到环境变量path中。（环境变量配置）

安装成功验证方式：打开cmd命令行或者终端，命令node -v可以查看node版本号；因为现在npm集成到node里，所以不用安装npm就能查看npm的版本信息，同样命令npm -v。
npm：是Node.js的包管理工具（package manager）。

大师兄说，在Node.js上开发时，会用到很多别人写的JavaScript代码。如果需要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

2、安装cnpm

链接文章：npm和cnpm（windows）安装步骤

链接文章：淘宝 NPM 镜像

npm从国外服务器下载文件（比如插件），但是受网络影响，下载过程中可能出现异常导致下载失败。

其实我们可以下载淘宝团队整理在国内服务器的文件（http://npm.taobao.org）；

安装命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
执行方式：cnpm跟npm用法一致，执行命令时将npm改成cnpm即可。
安装成功验证方式：cnpm -v

3、全局安装gulp

安装 gulp 命令行工具：cnpm install gulp -g
查看版本号：gulp -v

三、gulp的简单使用示例

（1）创建项目目录并进入
（2）在该目录下创建配置文件package.json文件
cnpm init 该命令将指引你设置项目名、版本、描述信息等
cnpm help package.json 该命令查看package.json帮助文档

比如一个package.json文件内容：

{
  "name": "gulptest",  						//项目名称（必须）不能有大写
  "version": "0.0.1",						//项目版本（必须）
  "description": "这是一个gulp的测试程序",  //项目描述（必须）
  "homepage": "",   						//项目主页
  "main": "index.js",						//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [								//关键词
    "gulp"
  ],
  "author": "wuxunxun007",					//作者
  "license": "ISC"							//项目许可协议
  "devDependencies": {						//项目依赖的插件（重要），如果插件安装了，该插件会被自动添加在这儿
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

（3）安装 gulp，作为开发时依赖项
cnpm install gulp --save-dev
安装完成后，就会在项目目录下产生一个node_modules文件

（4）此时最好再次检查gulp版本，应该有命令行gulp版本以及本地gulp版本
gulp --version
在这里插入图片描述
（5）在项目根目录下创建一个名为 gulpfile.js 的文件，在这个js文件中写上js代码，就可以使用。
（6）在项目根目录下执行 gulp 命令：gulp 或者是 gulp 任务名 或其他方式，就可以查看执行后的结果。

四、gulp 实现的最常见的功能

gulp 最常见的4个API ：src dest watch task

案例1：复制单个文件

将一个.html文件复制到另一个目录下：

var gulp =require("gulp");
gulp.task("_copy",function(){
	gulp.src("./src/source.html").pipe(gulp.dest("./dest/"));
});

在命令行末执行 gulp _copy ，能看到原来dest这个文件夹是空的，现在有了从src文件夹复制过来的文件source.html，说明复制成功。
在这里插入图片描述

案例2：复制全部文件

要复制项目的 所有文件 和 文件夹（包括子文件夹，不管有多少级）有两种方式：（xx/** 代表所有目录 xx 下的所有目录）

“./**/*” 当前路径用 “.” :
“*/**/*”

把项目目录下的所有文件都进行拷贝：

var gulp =require("gulp");
gulp.task("_copy",function(){
	gulp.src("./src/**/*").pipe(gulp.dest("./dest/"));
});

把src里面的所有文件，不管有多少级都给复制到dest文件里面了。
在这里插入图片描述
开发目录与部署目录的区别：查
链接知乎：大公司里怎样开发和部署前端代码？

案例3：watch监听

实现的功能是，_src目录下的source.html文件发生改变时，自动执行后面的任务，将gulpfile.js所在文件夹中的所有内容拷贝到目录文件下。


gulp.task("_watch",function(){
    gulp.watch("./src/source.html",function(){
        gulp.src("./**/*").pipe(gulp.dest("./dest/"))
    })
})

当然，对watch()的使用一般以解构方式，但是gulp.watch()无法监听到新增加的文件，这样一来，我们每次增加文件时都要执行gulp命令来重启服务。这并不是我们希望的结果，可以引入gulp-watch模块解决这个问题。

请看官网：gulp中文文档 API 及插件的使用

五、gulp的插件

gulp本身只做一些文件的拷贝，监视等，但是它提供了很多的接口，由插件完成更多对应的任务。如：js文件的编译，合并文件，压缩文件，优化图片的尺寸，创建本地的开发服务器。下面介绍一些常用插件，其他可以查找官方文档。

1、插件安装命令，moduleName代表所安装插件模块：

npm install moduleName 安装模块到项目目录下；
npm install -g moduleName -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置；
npm install -save moduleName -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖；
npm install --save-dev moduleName --save-dev 的意思是将模块安装到项目目录下，并作为开发依赖保存到 packsge.json 中的 devDependencies节点中。

2、合并文件：

安装命令：cnpm install gulp-concat --save-dev

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

gulp.task("_concat",function(){
    gulp.src(["./js/a.js","./js/b.js"]).pipe(concat("concat0.js")).pipe(gulp.dest("./dest"));
})

gulpfile.js所在项目目录下新建一个js文件下，写两个文件，分别命名a.js、b.js；
在这里插入图片描述
然后终端运行 gulp _concat 命令，然后打开看dest文件夹里新出现了一个文件concat0.js文件，打开，查看，已经将之前js文件夹里的两个js文件的内容合并在concat0.js里了。

3、压缩文件：删除多余的空格

先安装插件uglify：cnpm install gulp-uglify --save-dev

var gulp =require("gulp");
var uglify=require("gulp-uglify");
gulp.task("_uglify",function(){
    gulp.src("./js/a.js").pipe(uglify()).pipe(gulp.dest("./dest/"));
})

原来的a.js是以第一幅图片的格式写的，但是压缩完成后，目标文件夹中的a.js则是压缩后去掉多余空格的格式。
在这里插入图片描述

4、结合示例：合并，压缩，重命名

装插件rename：cnpm install gulp-rename --save-dev

var gulp =require("gulp");
var concat=require("gulp-concat");
var uglify=require("gulp-uglify");
var rename=require("gulp-rename");
gulp.task("_together",function(){
    gulp.src(["./js/a.js","./js/b.js"])
    .pipe(concat("tools.js"))
    .pipe(uglify())
    .pipe(rename("tools.min.js"))
    .pipe(gulp.dest("./dest/"));
})

在终端执行命令：
在这里插入图片描述
这两张是js文件里面的原始文件：

当合并、压缩、重命名完成后，现在是完成后的效果：

5、压缩css：

安装插件：cnpm install gulp-minify-css --save-dev

var gulp =require("gulp");
var minfyCss=require("gulp-minify-css");
gulp.task("_minfyCss",function(){
    gulp.src("./css/reset.css").pipe(minfyCss()).pipe(gulp.dest("./dest"));
})

这是原来的css格式：
在这里插入图片描述
这是压缩后的css格式，很明显，空格什么都都没有了：

6、压缩图片：

安装插件：cnpm install gulp-imagemin --save-dev

var gulp =require("gulp");
var imageMin=require("gulp-imagemin");
gulp.task("_imageMin",function(){
    gulp.src("./img/**/*")
    .pipe(imageMin())
    .pipe(gulp.dest("./dest/image/"))
})

执行gulp任务：
在这里插入图片描述
图片被压缩到目标文件夹了：

7、将ES6转换为ES5：

为什么要转换成es5？

es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法。
而gulp-ugilfy无法压缩es6，如果代码有使用es6的语法，则压缩会失败。
所以在打包的时候，我们有时需要将es6编译成es5。

安装插件：
cnpm install --save-dev babel-preset-es2015
cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env

var gulp =require("gulp");
var babel=require("gulp-babel");
gulp.task("_es65",function(){
    gulp.src("./js/QueryString.js")
    .pipe(babel({presets:['es2015']}))
    .pipe(gulp.dest("./dest/"));
})

执行命令：执行成功
在这里插入图片描述
转换前：es6

转换后，es5

六、常见问题

Pipe就是管道

gulp.src() 读取将要处理的文件，即源文件。
pipe() 管道，如何处理该文件（如：sass编译，复制文件，压缩文件等）。
gulp.dest() 处理后的文件的路径，即目的文件。

cannot find module

如果出现了cannot find module ’插件’，表示该模块没有安装成功；

解决：执行cnpm install gulp ‘插件’ --save-dev，就可以单独安装该模块。

例如：
在这里插入图片描述
说明模块glob-watcher没有安装成功；
执行以下命令安装设备依赖：cnpm install gulp glob-watcher --save-dev
如下图：

正在进行的项目如何用gulp:

新建空文件夹作为项目的文件夹（不要用gulp作为项目文件夹）
用npm初始化项目：用npm init命令产生package.json文件（或 cnpm init）
本地安装gulp，安装完命令行工具及设备依赖后，会生成node_modules文件夹
把项目目前的所有文件拷贝的到新建的项目文件夹里
在项目根目录下写gulpfile.js的代码
执行

package.json 配置文件

之前我们cnpm init创建的package.json配置文件，当我们安装插件成功后，就会在该文档中自动添加依赖说明，比如设备依赖，如下：

package.json

{
  "name": "20200702",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2"
  }
}

能看到devDependencies中添加了很多插件名称。

weixin_43297321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp安装&简单使用

自动化构建工具// gulp 不做重复的文件// gulp 的 API ：src dest watch tasklet gulp=require(“gulp”);gulp.task(“任务名”,callback);// .pipe().pipe();//管道方法加工处理？文件的拷贝gulp的插件合并文件压缩文件gulp 把es6—》es5...
复制链接

扫一扫