第三方模块 —— Gulp

Gulp是基于node平台开发的前端构建工具，作用是将机械化的操作编写成任务，想要执行机械化操作时，执行一个命令行命令任务就能自动执行了。用机器代替手工，提高开发效率。

Gulp能做以下的事情

• 项目上线，HTML、CSS、JS文件压缩合并
• 语法转化（es6转换为es5 ,虽然es6已经出现了很长一段时间，但是浏览器并没有完全支持它，有时需要将es6语法转换为es5语法才能在浏览器中运行、less转换为css）
• 公共文件抽离（如果公共文件需要修改，则只需要修改抽离出来的公共文件）
• 修改文件浏览器自动刷新

Gulp的使用

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

Gulp提供的方法（用来在gulpfile.js中编写任务）

•  gulp.src()   获取要处理的文件
• gulp.dest(）输出文件
• gulp.task(）建立gulp任务
• gulp.watch()  监控文件变化

//在gulpfile.js文件中写入
//在gulpfile.js文件中引入gulp模块
const gulp = require('gulp')
//使用gulp.task()方法建立任务,第一个参数是任务的名字，第二个参数是一个回调函数，在执行任务的时候实际上执行的是这个回调函数。
gulp.task('first',()=>{
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录,如果dist目录中没有css文件，会自动生成
.pipe(gulp.dest('./dist/css'))
})

 使用Node命令执行的是整个gulpfile.js,要执行gulp任务的话需要使用gulp提供的的同名命令行工具。

gulp提供了一个同名的命令行工具来执行gulp任务

使用 npm install gulp-cli -g  全局安装这个命令行工具，就可以使用 gulp 文件名 来执行gulp任务了。

   gulp插件

• gulp-htmlmin :html文件压缩
• gulp-csso：压缩css
• gulp-babel：Javascript语法转化
• gulp-less：less语法转换
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include：公共文件包含
• browswesync：浏览器实时同步 

gulp插件的使用（具体命令可在npmjs.com中查看）

1. 安装gulp插件
2. 在gulpfile.js中引入这个插件
3.  在gulp任务中调用插件

html任务

1.  html文件中的代码压缩

若要同时使用这两个插件，应该先抽取公共代码，再进行代码压缩。

 

使用npm install gulp-htmlmin下载gulp-htmlmin

使用gulp-htmlmin插件实现html文件中代码的压缩：

const gulp = require('gulp')
const htmlmin = require('html-min')
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html')
//压缩html文件中的代码
..pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
})

2.  使用npm install gulp-file-include下载gulp-file-include

使用gulp-file-include来抽取公共代码

const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
gulp.task('common',()=>{
gulp.src('./src/*.html')
.pipe(fileinclude());
.pipe(gulp.dest('dist'))})

在需要引入公共代码的文件中加入@@include（'公共代码路径'）

css任务

1.  less语法转换

使用npm insstall gulp-less下载gulp-less

使用gulp-less进行语法转换

2.  css代码压缩

使用npm install gulp-csso 下载

使用gulp-csso进行css代码压缩

const less = require('gulp-less')
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代码转换

 使用npm install gulp-babel @babel/core @babel/preset-env下载gulp-babel   @babel/core @babel/preset-env是gulp-babel所依赖的模块

使用gulp-babel进行es6代码转换 

2.  代码压缩

使用npm install gulp-uglify下载gulp-uglify

使用 gulp-uglify 进行代码的压缩

const babel = require('gulp-babel');
 const uglify = require('gulp-uglify');
gulp.task('jsmin',()=>{
gulp.src('./src/js/*.js' )
 .pipe(babel({
// 它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
persents:['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
 })

Gulp拷贝任务

光有html、css、js文件 是不足以把项目跑起来的，需要把src下面的其他文件拷贝到dist目录下。

gulp.task('copy',()=>{
gulp.src('./src/imgaes/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
}) 

 构建任务

上面编写的gulp任务是分开编写的，需要分别执行， 现在要构建一个任务，执行这个任务，所有的任务可以一起执行。

gulp.task('default',['htmlmin','cssmin','jsmin','copy'])

当在命令行执行gulp default命令的时候，会依次执行后面的任务 。如果任务名是default，那么当在命令行里执行这个任务的时候是不需要写任务名字的。直接执行gulp命令，会自动执行名为default的任务。