Gulp

一， gulp工具
用自动化构建工具增强你的工作流程 ， gulp

安装Gulp工具 ， 是基于node.js环境的 ， 所以要现有node.js环境才行。

npx 不需要安装到电脑里就可以用 ，gulp将开发流程中让人痛苦或耗时的任务自动化 ，从而减少你所浪费的时间 ， 创造更大价值

1. 安装

npm i -D gulp
npm install – global gulp-cli 在命令行中去使用gulp命令
npm install --save-dev gulp 在代码中去使用 require(‘gulp’)

要先 npm init 初始化，把package.json文件配好了 ，然后在要写gulp的路径下 安装 -D gulp

cnpm install gulp
npm init
2.创建gulpfile.js文件

做任务的文件 gulpfile.js 是node中的文件
比如引入

   var path = require('path);
   var fs = require('fs');
  

3.任务

一个任务就是一个函数

每个gulp任务（task) 都是一个异步的JS函数 。 此函数是一个可以接收callback作为参数的函数 ， 或者是一个返回stream ， promise ，event emitter ，child process 或 observable类型值的函数 ，由于某些平台的限制 而不支持异步任务， 因此gulp还提供了一个替代品 。

function defaultTask(){
	console.log(123);
}

module.exports={
	default : defaultTask
}

在命令行里输入 gulp default ，

如何让这个函数结束呢 ？ callback ，stream ， promise ，event emitter ，child process 或 observable

function defaultTask(cb){
	console.log(123);
	cb();
}

module.exports={
	default : defaultTask //当任务的名字是default 可以省略。 只去调用命令gulp
}

4.gulp方法

gulp的工具常见方法

src() ： 创建一个流， 用于从文件系统读取 vinyl对象（虚拟的文件格式）
dest() : 创建一个用于将Vinyl 对象写入到文件系统的流
series() : 任务按顺序执行
parallel() ： 任务同时执行
watch（）：监听文件改变并在发生更改时运行任务
pipe() : 连接转换流或可写流 （可以理解成jquery中的链式操作）

var { series ,parallel , src , dest} = require('gulp');

function defaultTask(cb){
 console.log(123)
}

function txtTask(){
	return src('./src/*.txt').pipe( dest('./dist') )   //pipe管道不需要引用 可以用 .dest写入dist文件（没有也可以自己创建）
}


module.exports = {
	default : defaultTask,
	testTask : testTask,
	all : series(defaultTask , testTask)
}

5.gulp常见任务 ：css

gulp-sass :sass处理
cnpm i -D gulp -sass

var sass = require('gulp-sass')

function sassTask(){
	return src('./src/*.scss').pipe( sass() ).pipe( dest('./dist') )
}

module.exports = {
	sass : sassTask
}

gulp-autoprefixer 自动添加浏览器前缀

var autoprefixer= require('gulp-sass')

function autoTask(){
	return src('./src/*.scss').pipe( autoprefixer({
		browsers: ['last 2 versions', 'Android >=4.0' ,'<5%'] //配置
	}) ).pipe( dest('./dist') )
}

module.exports = {
	auto: autoTask
}

gulp-cssmin : 压缩css文件

cnpm i gulp-cssmin

var cssmin = require('')

function cssminTask(){
	return src('./src/*.css').pipe( cssmin() ).pipe( dest('./dist') );
}

module.exports{
	cssmin: mincssTask
}

cnpm i -D gulp-rename 重命名文件

var rename = require('gulp-rename')
function cssTask(){
	return src('./src/*.scss')
	.pipe( sass() )
	.pipe( autoprefixer() )
	.pipe( cssmin() )
	.pipe( rename(function(path)){
		path.basename = path.basename + '.min' ;
	})
	.pipe( dest('./dist') );
}

gulp-clean 文件清理

cnpm i -D gulp-clean

var clean = require('gulp-clean')

function cleanTask(){
	return src('./dist').pipe( clean() )
}

function cleanTask(){
	return src('./dist'，{allowEmpty : true}).pipe( clean() )//允许为空。表示可以忽略文件的存在
}

6.javascript

gulp-babel :把es6变成es5
view gulp-babel versions 查看版本

babeljs.io

安装 在指定的目录下 ： cnpm i -D gulp-babel@7.0.0

gulp-uglify :把JS文件进行压缩的操作， 要先把es6转成es5 然后再压缩。

gulp-requirejs-optimize: 把require.js的模块进行合并

7.html

gulp-htmlmin : 把html文件进行压缩处理

var 

function htmlminTask(){
	return src('./src/*.html')
			.pipe( htmlmin({
				collapseWhite : true,
				removeEmptyAttributes: true,
				minifyCSS: true,
				miniJS: true,
				removeComments : true
			}) )
			.pipe( dest('./dist') )
}

module.exports = {
	html : htmlminTask
}

gulp-file-include : 把html做成片段
@include(‘head.html’)

gulp-concat : 合并文件

gulp-if : 写任务的时候 ， 可以进行条件处理的 。
gulp-webserver : 开启一个web服务器

function webserverTask(){
	return src('./dist')
	.pipe(webserver({
		host : 'localhost',
		port: 4000,
		open: './index.html',
		livereload : true // 热更新， 不刷新浏览器也能更新内容
	}))
}