gulp插件的使用

1.gulp API的常用方法

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

//引用gulp模块
const gulp = require('gulp');
//使用gulp.task()方法建立任务
gulp.task('first',callback=>{
    console.log('第一个gulp任务执行了')
    //使用gulp.src()获取要处理的文件
    gulp.src('./src/css/base.css')
    //将处理后的文件输出到dist目录
    .pipe(gulp.dest('dist/css'));
    callback();
    //回调函数
});

在命令行工具，运行定义的first任务

gulp first

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

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

(1)npm工具下载安装gulp-htmlmin插件

npm install gulp-htmlmin

(2)在gulpfile.js文件中引用gulp-htmlmin插件

const htmlmin = require('gulp-htmlmin');

(3)在gulpfile.js文件中引用gulp-htmlmin插件,实现HTML文件中代码的压缩,示例如下：

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

（4）在命令行工具，运行定义的htmlmin任务

gulp htmlmin

（5）下载安装gulp-file-include插件

npm install gulp-file-include

(6）在gulpfile.js文件中引用gulp-file-include插件

const fileinclude = require('gulp-file-include');

（7）在gulpfile.js文件中调用gulp-file-include插件

gulp.task ( 'htmlmin'， (callback) => {
    gulp.src( './src/*.html ')
//抽取HTML文件中的公共代码
    .pipe (fileinclude ( ))
//压缩HTML文件中的代码
.pipe (htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest ( 'dist'));
callback();
});

（8）在命令行工具，运行定义的fileinclude任务完成对HTML文件公共代码的抽取

（9）创建HTML文件

在demo07\src目录下新建common目录，然后在common目录下创建header.html文件,并把头部的公共代码粘贴到 header.html 文件中

（10）修改代码

把demo07\src目录下的default.html文件和 article.html 文件的头部代码删除掉，修改为

@@include('/common/header.html')

(11）运行gulp htmlmin

打开命令行工具，切换到demo07目录，再次运行命令“gulp htmImin”。gulp任务执行成功后，打开dist目录下的default.html文件和 article.html文件，查看代码会发现这两个文件中都包含有header部分代码。

3.压缩并转换Less语法

（1）下载安装gulp-less插件

在项目下，通过npm工具下载安装gulp-less插件

npm install gulp-less

（2）在gulpfile.js 文件中引用gulp-less插件。

const less = require('gulp-less');

（3）在 gulpfile.js文件中调用gulp-less插件。

实现将Less语法转换为CSS语法

gulp.task('cssmin',(callback) => {
//选择css目录下的所有.less文件
    gulp.src('./src/css/*.less')
//将Less语法转换为cSS 语法.pi
    .pipe(less())
//将处理的结果输出
    .pipe(gulp.dest('dist/css'))
callback();
} );

(4）在demo07\src\lcss目录下，新建需要编译的 a.less文件

.headers {
width: 100px;
.logo{
height: 200px;
background-color: red;
}

上述代码使用Less语法提供的嵌套规则编写CSS代码。

(5 )打开命令行工具，切换到demo07目录，运行命令“gulp cssmin”

.headers {
width: 100px;
 }
.headers .logo {
height: 200px;
background-color: red;
 }

同时获取.less和.css两种类型的文件并对其进行压缩 可以将gulp.src('路径')中的字符串改成数组的形式

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

（6）在demo07目录下，通过npm工具下载安装gulp-csso插件，对CSS代码进行压缩

npm install gulp-csso

( 7）在 gulpfile.js文件中引用gulp-csso插件

const csso = require('gulp-csso');

(8）在 gulpfile.js文件中调用gulp-csso插件，对CSS代码进行压缩

gulp.task( 'cssmin', (callback) =>
{
//选择css目录下的所有.less 文件以及.css文件
gulp.src(['./src/css/* .less', './src/ css/* .css ' ])
//将Less 语法转换为cSS语法
.pipe (less () )
//将cSS代码进行压缩
.pipe (csso ())
//将处理的结果输出
.pipe (gulp.dest ('dist/css ') )
callback();
 });

(9)打开命令行工具，切换到demo07目录，运行命令“gulp cssmin”

此时，打开css目录下的 a.css文件，会发现代码已经被压缩了

.headers{width: 100px }.headers .logo {height:200px; background-color:red}

4.压缩并转换ES6语法

(1)在C:\code\chapter02\demo07目录下，通过npm工具下载安装gulp-babel插件及它的依赖模块，实现ES6语法的转换

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

(2）在gulpfile.js文件中引用gulp-babel插件

const babel = require('gulp-babel');

(3）在 gulpfile.js文件中调用gulp-babel插件，实现ES6语法的转换

gulp.task ( 'jsmin', (callback) =>{
//选择js目录下的所有JavaScript 文件
gulp.src( './src/js/* .js ')
.pipe (babel({
//判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: [ '@babel/env ']
}))
.pipe (gulp.dest ('dist/js ') );
callback();
 });

通过gulp.task()创建一个jsmin任务，然后调用babel()方法完成对ES6语法的转换。最后使用gulp.dest()方法将文件保存到dist目录下的js目录中。

(4)在demo07'srcljs目录下，新建需要编译的JavaScript文件(如 base.js文件)

const x =100;
 let y = 200;
const fn = ()=>{
console.log (1234);
};

(5）打开命令行工具，切换到demo07目录，运行命令“gulp jsmin”

gulp任务执行成功后,打开项目下的dist目录,然后打开js目录就可以看到js目录下新建了一个同名的base.js文件。base.js

"use strict" ;
var x= 100;
var y = 200;
var fn = function fn({
console.log (1234);
};

从base.css文件的代码可以看出，gulp-babel插件已经成功将ES6语法转换成了ES5语法。

下一步将要完成对JavaScript文件中的代码的压缩操作。

( 6）在demo07目录下，通过npm工具下载安装gulp-uglify插件

npm install gulp-up

(7）在gulpfile.,js文件中引用gulp-uglify 插件

const uglify  = require('gulp-uglify');

(8)在gulpfile.js文件中调用gulp-uglify插件，对JavaScript 代码进行压缩

1gulp.task( 'jsmin',(callback)=>{
//选择js目录下的所有JavaScript 文件
gulp.src('./src/js/* .js ')
.pipe (babel({
//判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: [ '@babel/env ' ]
}) )
.pipe (uglify())
.pipe(gulp.dest ( 'dist/js' ));
callback();
 });

(9)打开命令行工具，切换到demo07目录，运行命令“gulp jsmin”

gulp任务执行成功后，打开项目下的dist目录,然后打开js目录就可以看到当前js目录下的 base.,js文件被压缩了

"use strict";"var x =100,y=200,fn=function(){console.log(1234)};

5.复制目录

下面要把src目录下的images目录和 lib目录复制到dist目录下

(1)在gulpfile.js文件中创建copy任务，进行目录复制操作

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

通过gulp.task()创建一个copy任务，分别使用gulp.src(获取src目录下的images目录和 lib目录,并使用gulp.dest()方法将images文件和lib文件保存到dist目录中。

6.执行全部构建任务

(1)在gulpfile.js 文件中创建default任务

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

( 2）打开命令行工具，切换到demo07目录，运行“gulp default”命令

gulp default