Gulp的使用

一、Gulp的介绍及安装

1. Gulp是基于node平台开发的前端工具

2. Gulp可以处理日常工作流产生的任务（作用）：

• 项目上线时对HTML、CSS、JavaScript文件合并、压缩；

• 将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行；

3. Gulp提供的方法

• gulp.src( )——获取任务要处理的文件

• gulp.dest( )——输出文件

• gulp.task( )——建立gulp任务

• gulp.watch( )——监控文件的变化

4. Gulp工具的安装

（1）全局安装gulp-cli：npm install gulp-cli@2.3.0 -g

（2）在项目中安装gulp：npm init

   npm install gulp@4.0.2 --save-dev

（3）构建项目

二、压缩并抽取HTML中的公共代码——html

1. 安装插件

npm install gulp-htmlmin

npm install gulp-file-include

2. 引入模块

// 引入htmlmin插件

const htmlmin = require('gulp-htmlmin')

// 引入gulp-file-include

const fileInclude = require('gulp-file-include')

3. 建立任务

gulp.task('htmlmin', callback => {

gulp.src('./src/*.html')

.pipe(fileInclude())

.pipe(htmlmin({

collapseWhitespace: true

}))

.pipe(gulp.dest('./dist'))

callback();

})

4. 抽取公共部分代码

先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中

@@include()语法是由gulp-file-include插件提供的，小括号中是代码片段的路径以及文件的名字。

在原文件中（article.html）使用@@include('./common/header.html')（）里面存放路径

5. 执行任务

gulp htmlmin

代码截图如下：

三、压缩并转换Less语法——css

1. 安装插件

//less转换

npm install gulp-less

//css压缩

npm install gulp-csso

2. 引入模块

// 引入gulp-less插件

const less = require('gulp-less')

// 引入gulp-csso插件

const cssmin = require('gulp-csso')

3. 在css文件夹下面建.less后缀的文件

4. 建立任务

gulp.task('cssmin', callback => {

gulp.src(['./src/*.css', './src/css/*.less'])

.pipe(less())

.pipe(cssmin())

.pipe(gulp.dest('./dist/css'))

callback();

})

5. 执行任务

gulp cssmin

代码截图如下：

四、压缩并转换ES6语法——js

1. 安装插件

npm install gulp-uglify

npm install gulp-babel @babel/core @babel/preset-env

2. 引入模块

// 引入gulp-babel插件

const babel = require('gulp-babel')

// 引入gulp-uglify插件

const uglify = require('gulp-uglify')

3. 建立任务

gulp.task('jsmin', callback => {

gulp.src('./src/js/*.js')

.pipe(babel({

presets: ['@babel/env']

}))

.pipe(uglify())

callback();

})

4. 执行任务

gulp jsmin

代码截图如下：

五、复制目录——copy

六、执行全部构建任务

七、项目依赖管理

• 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

• 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

八、Node.js模块加载机制

• 模块查找规则——当模块拥有路径但没有后缀时

require('./find.js');

require('./find');

1.require方法根据模块路径查找模块，如果是完整路径，直接引入模块；

2. 如果模块后缀省略，先找同名JS文件再找同名JS文件夹；

3. 如果找到了同名文件夹，找文件夹中的index.js；

4. 如果文件夹中没有index.js就会去当前文件夹中package.json文件中查找main选项的入口文件；

5. 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到；

• 模块查找规则——当模块没有路径且没有后缀时

require('find');

1. Node.js会假设它是系统模块;

2. Node.js会去node_modules文件夹中;

3. 首先看是否有该名字的JS文件;

4. 再看是否有该名字的文件夹;

5. 如果是文件夹看里面是否有index.js;

6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件;

7. 否则找不到报错;