gulp的安装以及使用

目录​​​​​​​​​​​​​​ 

 

gulp是什么？​​​​​​​ 

gulp包含的内容

gulp的安装和基本的构建项目

安装

构建项目 

在项目中使用gulp

gulp中的常用插件

1.压缩并抽取HTML中的公共代码

2.压缩并转换Less语法

 3.压缩js代码并转换ES6语法

4.复制目录

5.执行全部构建任务 

补充说明：gulp API的常用方法​​​​​​​

---

gulp是什么？​​​​​​​ 

gulp是前端开发过程中一种基于流的代码构建工具，是基于Nodejs的自动任务运行器；它不仅能对网站资源进行优化，还能自动化地完成前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

gulp包含的内容

gulp-cli：启动构建工具的命令行接口

本地gulp：构建时实际运行的程序

gulpfile.js：告诉gulp如何构建软件的指令文件

gulp插件：用于合并、压缩、修改文件的插件

gulp的安装和基本的构建项目

安装

1.全局安装gulp-cli，首先通过npm工具下载安装gulp-cli工具

npm install gulp-cli@2.3.0 -

2.在项目中安装gulp

（1）使用npm初始化项目 

npm init

（2）局部安装gulp 

npm install gulp@4.0.2 --save-dev

3.检查gulp版本

gulp -v

出来的结果应该是

CLI version: 2.3.0
Local version: 4.0.2 

构建项目 

（1）安装成功后，在项目的根目录下建立gulpfile.js文件，文件名不能随意更改

（2）重构项目的目录结构，如果所示

 （3）在gulpfile.js文件中编写构建项目的任务

// 导入gulp
const gulp = require('gulp');

// 建立任务：gulp.task(‘任务名’，‘回调函数’)
gulp.task('first', (callback) => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css')
        // 将处理后的文件输出到dist目录里面
        .pipe(gulp.dest('./dist/css'))
    callback();
})

（4）在命令行中执行 

gulp first

结果如下

[15:02:01] Using gulpfile ~/node js/230318/第三方模块/Gulp使用/gulpfile.js
[15:02:01] Starting 'first'...
[15:02:01] Finished 'first' after 14 ms 

在项目中使用gulp

gulp中的常用插件

插件	说明
gulp-htmlmin	压缩HTML文件
gulp-csso	压缩优化css
gulp-babel	JavaScript语法转换
gulp-less	Less语法转换
gulp-sass	Sass语法转换
gulp-uglify	压缩混淆JavaScript文件
gulp-file- include	公共文件包含
browsersync	浏览器时间实时同步

1.压缩并抽取HTML中的公共代码

（1）下载插件

npm install gulp-htmlmin ​​​​​​​

npm install gulp-file-include

（2）引入插件

（3）建立任务 

// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')
// 2-建立任务：压缩html文件以及抽取公共部分代码
gulp.task('htmlmin', callback => {
    // 获取文件：html文件
    gulp.src('./src/*.html')
        // 抽取公共部分代码
        .pipe(fileInclude())
        // 压缩html代码
        // .pipe()只是对文件处理的结果进行包装，并不会直接操作文件
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        // 抽取并压缩后的html文件输出dist目录下
        .pipe(gulp.dest('./dist'))
    callback();
})

（4）抽取公共部分代码

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

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

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

（5）执行任务

gulp htmlmin

2.压缩并转换Less语法

（1）下载插件

npm install gulp-less

npm install gulp-csso

（2）引入插件

2.引入插件
// 引入gulp-less插件
const less = require('gulp-less')
// 引入gulp-csso插件
const cssmin = require('gulp-csso')

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

.father {
    background-color: #fff;
    font-size: 16px;

    .son {
        font-weight: bold;
    }
}

（4）建立任务  

// 建立任务：转换less语法，压缩css文件
gulp.task('cssmin', callback => {
    // 获取文件.css .less两种类型的文件
    gulp.src(['./src/*.css', './src/css/*.less'])
        // 转换less语法
        .pipe(less())
        // 压缩css文件
        .pipe(cssmin())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})

（5）执行任务

gulp cssmin

 3.压缩js代码并转换ES6语法

（1）下载插件

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

npm install gulp-uglif

npm install uglify

（2）引入插件

// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')

（3）建立任务  

// 建立任务：转换ES6语法，压缩js文件
gulp.task('jsmin', callback => {
    // 获取文件.js
    gulp.src('./src/js/*.js')
        // 转换es6代码
        .pipe(babel({
            // 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        // 压缩js文件
        .pipe(uglify())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/js'))
    callback();
})

（4）执行任务

gulp jsmin

4.复制目录

（1）建立任务

// 建立任务:copy(images/lib)
gulp.task('copy', callback => {
    // 获取文件images
    gulp.src('./src/images/*')
        // 将文件输出
        .pipe(gulp.dest('./dist/images'))
    // 获取文件lib
    gulp.src('./src/lib/*')
        // 将文件输出
        .pipe(gulp.dest('./dist/lib'))
    callback();
})

（2）执行任务

 gulp copy

5.执行全部构建任务 

（1）建立任务，使用gulp.series()方法

gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'jsmin', 'copy'))

（2）执行任务

gulp default 

补充说明：gulp API的常用方法

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