（6）Gulp能做什么
项目上线，HTML、CSS、JS文件压缩合并
语法转换（es6、less …）
公共文件抽离
修改文件浏览器自动刷新
（7）Gulp使用
使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务
（8）Gulp中提供的方法
gulp.src()：获取任务要处理的文件
gulp.dest()：输出文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化
代码语言：javascript复制 const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});
// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
console.log('我们人生中的第一个gulp任务执行了');
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));
});
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// 复制文件夹
gulp.task('copy', () => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
当任务名为：default时,可以只写gulp
注：gulp.pipe:**
首先，gulp的源码里没有任何一部分是定义pipe的。
gulp的pipe方法是来自nodejs stream API的。
gulp本身是由一系列vinyl模块组织起来的。
pipe方法到底是什么呢？
pipe跟他字面意思一样只是一个管道
例如我有一堆文件
var s = gulp.src(["fileA","fileB","fileC"])
1
src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流（readableStream）。
返回的是由从这些文件而来的流（stream）
既然是Stream，自然少不了最常用的pipe的方法。
s.pipe(fn)
pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。
注意的是这个函数只是一个包装，并不是会直接操作文件的。
管道与Stream
也就是说pipe本身只是定义了管道的组织情况，管道本身的具体结构（Stream对象）
，是需要开发者自己去设计的。
pipe方法只负责返回这个管道结构（Stream对象）
楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可
Stream与File
注意的是gulp里的流的file必须是vinyl对象
var File = require("gulp-utils").File//或者var File = require("vinyl") var myf = new File()myf.contents = new Buffer("haha")
1
（9）Gulp插件
gulp-htmlmin ：html文件压缩
gulp-csso ：压缩css
gulp-babel ：JavaScript语法转化
gulp-less: less语法转化
gulp-uglify ：压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync 浏览器实时同步
