基于流的JS项目构建工具：Gulp

一.了解gulp 二.准备使用gulp 三.gulp常用的API 四.gulp初体验五.添加一个打包css的任务六.添加一个打包sass的任务七.添加一个打包js的任务八.添加一个打包html的任务九.添加其他文件的移动任务十.创建一个默认任务十一.创建一个删除任务十二.gulp启动服务十三.gulp配置代理

一.了解gulp

基于流的前端自动化打包构建工具，可以对文件进行压缩、整合、移动、混淆。

除了gulp，前端还有一个基于js文件的打包构建工具，webpack 。

什么是流

那什么是流呢？我们常说的流主要分两种：

流文件：将文件一段一段传输的文件传输格式

流格式：从源头开始一步一步经过加工，每一步骤都依赖于上一步的结果，最终给出完整成品的过程

而gulp就是基于流格式的打包构建工具。

gulp的依赖环境

gulp依赖于node环境进行开发，因为gulp的底层就是对node中包括http、fs等读写文件模块进行封装形成的

gulp的作用

转码（自动添加前缀）、压缩css文件

转码（ES6转ES5）、压缩js文件

转码（对格式的转换）、压缩html文件

对静态资源文件的处理

对第三方文件的处理

gulp的安装


$ npm install --global gulp

gulp的检测


# gulp@4后的版本打印会多一个Local version：Unknown，这个不是报错，不用管
$ gulp --version

gulp的卸载


$ npm uninstall --global gulp

gulp的版本

gulp@3 （安装后检测版本后的打印一般类似于：gulp 3.9.1）

gulp@4 （安装后检测版本后的打印一般类似于：gulp cli 2.3.0）

gulp 全局工具安装完毕

能给你的电脑提供一个启动gulp的环境

二.准备使用gulp

src放源代码，dist放编译后的代码（一般由gulp自动生成）

准备一个gulpfile.js文件

用于编写本项目的打包配置，是gulp进行打包的依据

在项目里再次安装gulp

注意：项目里的gulp是以第三方模块的形式出现的

为什么要安装？

全局安装的gulp是让电脑拥有执行gulp相关指令的能力

项目安装的gulp是让你可以在导入后使用gulp.xxx() 方法

怎样安装？

gulp是用来打包的，只用于开发环境中，所以安装到package.json（记录第三方依赖的文件）的devDependencies（记录项目开发环境的依赖，dependencies记录开发、上线后都需要用到的内容）中


$ npm install -D gulp

在gulpfile.js中编写配置

gulp依赖于node环境运行，书写gulpfile.js文件就按照node的模块化语法进行书写（CommonJS）


# 在gulpfile.js文件中引入gulp模块
const gulp = require('gulp')

console.log(gulp)

编写本项目的打包流程

编写完后，执行gulp指令运行整个打包流程

三.gulp常用的API

四.gulp初体验

首先导入gulp以及要用的模块


# 导入gulp
const gulp = require('gulp')

# 导入gulp-cssmin
const cssmin = require('gulp-cssmin')

gulp@3 的标准书写语法


gulp.task('cssHandle', function () {
	// 需要把这个流return出去task才能捕获该任务的结束
	return gulp
		.src('./src/css/*.css')
		.pipe(cssmin())
		.pipe(gulp.dest('./dist/css'))
})

gulp@4 的标准书写语法，需要在gulpfile.js文件中暴露定义的函数


// 或function cssHandle(){}
const cssHandle = function() {
	return gulp
		.src('./src/css/*.css')
		.pipe(cssmin())
		.pipe(gulp.dest('./dist/css'))
}

module.exports.cssHandle = cssHandle

五.添加一个打包css的任务


// 导入gulp
const gulp = require('gulp')

// 需安装gulp-cssmin，执行命令npm install -D gulp-cssmin 安装
// 导入gulp-cssmin 
const cssmin = require('gulp-cssmin')

// 需安装gulp-v，执行命令npm install -D gulp-autoprefixer 安装
// 导入gulp-autoprefixer，自动添加前缀，用于版本兼容
const autoPrefixer = require('gulp-autoprefixer')

// 创建任务
const cssHandler = function () {
	return gulp
		.src('./src/css/*.css') // 1.找到内容
		.pipe(autoPrefixer()) // 2.自动添加前缀
		.pipe(cssmin()) // 3.压缩
		.pipe(gulp.dest('./dist/css')) // 4.放到指定目录
}

// 导出任务
module.exports.cssHandler = cssHandler

其中autoPrefixer是需要带参数的，但是在项目拥有package.json时可以把参数编写到该文件，如下图：

autoPrefixer的作用就是对浏览器做版本兼容，会将css样式自动添加前缀以适用版本，自动添加如下图：

六.添加一个打包sass的任务

即可以用gulp配置任务来转换sass，也可以直接在电脑安装sass工具转换sass文件为css。

这里记录用gulp配置任务转换sass的方法，首先在项目里下载gulp-sass，如下图：


// 导入gulp
const gulp = require('gulp')

// 需安装gulp-cssmin，执行命令npm install -D gulp-cssmin 安装
// 导入gulp-cssmin 
const cssmin = require('gulp-cssmin')

// 需安装gulp-v，执行命令npm install -D gulp-autoprefixer 安装
// 导入gulp-autoprefixer，自动添加前缀，用于版本兼容
const autoPrefixer = require('gulp-autoprefixer')

// 导入gulp-sass
const sass = require('gulp-sass')

// 创建任务
const sassHandler = function () {
	return gulp
		.src('./src/sass/*.scss') // 1.找到内容
		.pipe(sass())
		.pipe(autoPrefixer()) // 2.自动添加前缀
		.pipe(cssmin()) // 3.压缩
		.pipe(gulp.dest('./dist/sass')) // 4.放到指定目录
}

// 导出任务
module.exports.cssHandler = sassHandler

关于sass转码的适用如下图