gulp应用

亦凉 2021-09-30 06:02 299阅读 0赞

gulpjs是一个前端构建工具，与grunt相比，gulp配置参数相对简单很多，API也和简单，学习很容易，gulp使用的是nodejs中stream来读取和操作数据，其速度非常快。如果你还没有使用过前端构建工具，或者觉得grunt太难用的话，来尝试一下gulp吧，在使用gulp之前首先确保正确安装过node环境：[https://nodejs.org/en/][https_nodejs.org_en]，打开cmd 使用命令 node -v 检查本地安装的node版本，和命令 npm -v 检查本地npm安装的版本（高版本的node在安装时会自动安装npm环境，不需要单独在安装npm），如果都检查成功就可以使用gulp了。

1. 打开cmd，全局安装gulp，全局安装gulp目的是为了执行gulp任务：

1 npm install gulp -g

使用 gulp -v 查看gulp版本，检查是否安装成功。

2. 全局安装成功后需要本地在次安装gulp，本地安装gulp则是为了调用gulp插件的功能（本地安装则需要将cmd命令切换到需要使用gulp的本地项目目录下在进行安装）：

1 npm install --save-dev gulp

3. 新建package.json文件，package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件：

1 npm init

![1263182-20171030102023996-21241883.png][]

执行完后会在项目中生成（package.json）文件：

1 {
     2   "name": "haozu",
     3   "version": "1.0.0",
     4   "description": "",
     5   "main": "index.js",
     6   "dependencies": {},
     7   "devDependencies": {},
     8   "scripts": {
     9     "test": "echo \"Error: no test specified\" && exit 1"
    10   },
    11   "author": "liangjingxuan",
    12   "license": "ISC"
    13 }

4. 在项目中新建gulpfile.js文件，gulpfile.js文件是gulp项目的配置文件，是位于项目根目录的普通js文件（定义一个默认任务）：

1 var gulp = require('gulp');
    2 gulp.task('default',function(){
    3     console.log('hello world');
    4 });

gulp更多插件请查看此处：[https://gulpjs.com/plugins/][https_gulpjs.com_plugins]

gulp API 文档请查看此处：[http://www.gulpjs.com.cn/docs/api/][http_www.gulpjs.com.cn_docs_api]

5. 运行gulp，命令提示符执行：gulp 任务名称；如果gulp后面没有跟着名称则会执行默认default中的操作：

如：

1 gulp Less

或：

1 gulp

转载于:https://www.cnblogs.com/l000/p/7753505.html

[https_nodejs.org_en]: https://nodejs.org/en/
[1263182-20171030102023996-21241883.png]: /images/20210725/f87b171297174aa588de95ca00964c7f.png
[https_gulpjs.com_plugins]: https://gulpjs.com/plugins/
[http_www.gulpjs.com.cn_docs_api]: http://www.gulpjs.com.cn/docs/api/