【DXFLQM】Gulp安装使用

提示：记笔记用的

---

Gulp介绍

Gulp 是一个基于流的自动化构建工具。除了可以**管理任务和执行任务，还支持监听文件、读写文件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：

• 通过 gulp.task 注册一个任务；
• 通过 gulp.src 读取文件；
• 通过 gulp.dest 写入文件。
• 通过 gulp.watch 监听文件变化；
• 通过 gulp.run 执行任务；

Gulp 的优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

Gulp 的缺点：和Grunt 类似。集成度不高，要写很多配置后才可以用，无法做到开箱即用。

中文官网：https://www.gulpjs.com.cn/

Gulp安装

先初始化

npm init -y

修改下载源

npm config set registry https://registry.npm.taobao.org 

安装

cnpm install gulp@3.9.1  -g     	 // 使用npm 安装gulp     -g 表示全局安装，没有-g表示本地安装
cnpm install gulp@3.9.1 -D			//@下载的版本

gulp -v      查看gulp版本

有写-g代表安装到全局，那么任意一个本地项目都可以使用这个Gulp，如果没有写-g，就只有当前这个项目可以使用gulp。

-D后，安装包会在package中的 devDependencies对象中。简称dev。dev是在开发环境中要用到的。

-S后，安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。

安装全局只用写一次，本次安装每新建个项目都要安装一次

使用Gulp

node_modules目录 ： 是项目开发时依赖的库，比如：less编译插件, js 和并插件等（不用打包到项目）node环境依赖

src目录 ： 是源代码存放目录，编写代码，编写好之后需要编译

gulpfile.js ： gulp的配置文件，就是让咱们的src目录的源代码按照我们的意愿 去执行。

需要在项目根目录下新建一个gulpfile.js

在gulpfile.js中写下代码

var gulp = require('gulp');   // 在node_modules下找到gulp包，导入gulp

gulp.task('任务名',function(){
    
    // 对这个'src/index.html'文件进行编译输出到目的地build文件夹(和dist)下
    gulp.src('src/index.html')	//寻找要配置的文件
        .pipe(gulp.dest('build'))	//执行文件的插件方法
        .pipe(gulp.dest('dist'))	//将新文件添加到：
});

在当前目录下执行终端，注意要执行终端任务先进到gulpfile.js所在的文件夹下

gulp  任务名

Gulp的插件

css压缩