Gulp学习笔记（黑马教程）

一，Gulp的基础概念

它是基于node平台开发的前端构建工具。
它也是node.js的第三方框架，它的作用主要是将机械化的开发过程用命令行的方式去自动化完成。
可以实现的功能有：
项目上线时：HTML,CSS，js文件的压缩合并、语法转化（es6,less……）、公共文件抽离、修改文件浏览器自动刷新。

二，Gulp的下载和安装

1，使用npm install gulp来下载gulp文件。
2，在项目的根目录下建立gulpfile.js文件。（名字必须是这个）
3，重构一下项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件。
4，在gulpfile.js文件中编写任务。
5，在命令行工具中执行gulp任务。

三，使用实例

//引入gulp模块
const gulp =require('gulp')
//使用gulp.task建立任务：第一个参数是任务的名称，第二个任务是任务的回调函数
gulp.task('firstTaskName',()=>{
	console.log("这个任务被执行的提示")
	//获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('./dist/css'))
		//处理完之后，把处理后的文件放到'./dist/css'文件夹内。（这里没有处理，相当于复制文件）
})

现在运行任务的代码写好了，我们想执行这个任务，可以用gulp-cli的命令行工具来执行这个任务。
那么，就需要先安装gulp-cli：

安装完成，现在可以使用这个命令行工具找到名字叫做，firstTaskName的任务了，回车之后就会执行：

执行后可以在dist目录下看到复制过来的css文件了。

这就是gulp的基本使用流程。
但值得注意的是，gulp本身属于轻内核第三方模块，只提供了上述几个方法，获取要处理的文件，将处理好的文件放置到指定的目录。
要完成诸如文件的压缩，合并等操作，还需要使用nrm命令下载插件进行操作。

四，Gulp常用插件

五，gulp插件的使用-html文件压缩

1，通过npm下载插件
2，引用这个插件
3，调用这个插件
npm官网：https://www.npmjs.com/
示例：html中代码的压缩操作

照着网上的文档，下载这个插件：

接下来引用这个插件，实际上，网站使用说明文档中，已经把示例写好了，复制过来就可以：


然后再去网站复制相关的操作：

写好了之后是这样子的：

//引入gulp模块
const gulp =require('gulp')
const htmlmin = require('gulp-htmlmin');
//使用gulp.task建立任务：第一个参数是任务的名称，第二个任务是任务的回调函数
gulp.task('firstTaskName',()=>{
	console.log("这个任务被执行的提示")
	//获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('./dist/css'))
		//处理完之后，把处理后的文件放到'./dist/css'文件夹内。（这里没有处理，相当于复制文件）
})

gulp.task('htmlminTask',()=>{
	console.log("这个任务被执行的提示")
	//获取要处理的文件*是通配符，指所有的后缀为.html的文件
	gulp.src('./src/*.html')
		.pipe(htmlmin({ collapseWhitespace: true }))
		//处理取到的文件，压缩空格：true
		.pipe(gulp.dest('./dist'))
		//处理完之后，输出到这个文件夹下
})

接下来要做的就是去命令行窗口执行这个任务了：

执行完成后查看完成区目录：

文件已经生成了，打开后可以发现已经被压缩过了。

六，gulp插件的使用-html文件压缩-公共文件包含

同样的，官网先搜索这个命令的文档。

先安装：

在gulpfile.js中引入这个插件：


然后复制编写任务内容：先抽取公共代码，然后再压缩html文件。
在开发过程中，写代码的时候，对于公共部分的html结构，我们可以单独编写（放在common文件夹下的header.html内），然后再在需要的地方引入：

于是gulpfile.js的任务这样写：

//引入gulp模块
const gulp =require('gulp')
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
//使用gulp.task建立任务：第一个参数是任务的名称，第二个任务是任务的回调函数
gulp.task('firstTaskName',()=>{
	console.log("这个任务被执行的提示")
	//获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('./dist/css'))
		//处理完之后，把处理后的文件放到'./dist/css'文件夹内。（这里没有处理，相当于复制文件）
})

gulp.task('htmlminTask',()=>{
	console.log("这个任务被执行的提示")
	//获取要处理的文件*是通配符，指所有的后缀为.html的文件
	gulp.src('./src/*.html')
		.pipe(fileinclude())//将取得的html文件中要回调公共html的部分补齐!
		.pipe(htmlmin({ collapseWhitespace: true }))
		//处理取到的文件，压缩空格：true
		.pipe(gulp.dest('./dist'))
		//处理完之后，输出到这个文件夹下
})

就又在有公共代码的部分引入了HTML文件。

七，css任务

1，less语法的转换
2，css代码的压缩
同样的，先安装插件,再引入，然后编写任务内容，最后执行任务

//css任务
gulp.task('cssmin',()=>{
	gulp.src('./src/css/*.less')
		.pipe(less())
		.pipe(gulp.dest('./dist'))
})

其他的任务也是这样。