gulp中的常用操作

一.gulp中提供了很多插件，常用插件如表所示。

gulp的常用插件

插件	说明
gulp-htmlmin	压缩HTML文件
gulp-csso	压缩优化css
gulp-babel	Javascrtipt语法转换
gulp-less	Less语法转换
gulp-uglify	压缩混淆Javascrtipt文件
gulp-copy	复制目录到指定目录下
gulp-default	执行全部构建任务
gulp-file-include	公共文件包含

二.现在让我们来看看这些插件的具体用法吧。

1.gulp-htmlmin：压缩HTML文件和 gulp-file-include： 抽取文件代码

学习心得：.pipe()只是对文件处理的结果进行包装，并不会直接操作文件。建立任务：gulp.task(‘任务名’，‘回调函数’)。

实践步骤：

（1）下载插件

1.压缩html文件以及抽取公共部分代码。

// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')

（2）引入插件 

npm install gulp-htmlmin
npm install gulp-file-include

（3）建立任务

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文件中

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

<!-- 头部框架开始 -->
	@@include('./common/header.html')
	<!-- 头部框架结束 -->
	<!-- 文章框架开始 -->

（5）执行任务 gulp htmlmin，结果如下图所示

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> gulp htmlmin
[17:46:43] Using gulpfile D:\学习\Node.js\实践项目\第三方工具\GLUP\gulpfile.js
[17:46:43] Starting 'htmlmin'...
[17:46:43] Finished 'htmlmin' after 15 ms

2.gulp-csso：压缩优化css和gulp-less：Less语法转换

学习心得：gulp-less 将 Less语法转化为Css语法，gulp-csso将css代码进行压缩，两者可以结合使用。

实践步骤：

（1）下载插件

1. 下载安装Less语法转换插件gulp-less
2. 下载安装csso语法转换插件gulp-csso

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install gulp-less

up to date in 1s
PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install gulp-csso

up to date in 1s

（2）引入插件 

1. 在gulpfile.js文件中引用gulp-less插件
2. 在gulpfile.js文件中引用gulp-csso插件

// 引入gulp-less
const babel = require('gulp-babel')
// 引入gulp-csso
const uglify = require('gulp-uglify')

(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

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> gulp cssmin
[19:32:56] Using gulpfile D:\学习\Node.js\实践项目\第三方工具\GLUP\gulpfile.js
[19:32:56] Starting 'cssmin'...
[19:32:56] 'cssmin' 9.84 ms

3.gulp-babel：Javascrtipt语法转换和gulp-uglify：压缩混淆Javascrtipt文件

学习心得：gulp-babel将ES6语法进行转换，gulp-uglify对js文件进行压缩，两者可以结合使用。

实践步骤：

（1）下载插件

1. 压缩js代码并转换ES6语法
2. 下载安装语法转换插件gulp-babel @babel/core @babel/preset-env

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install

up to date in 1s
PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install gulp-babel @babel/core @babel/preset-env

up to date in 1s

3.下载安装js代码压缩插件gulp-uglify
4. npm install uglify

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install gulp-uglify

up to date in 1s
PS D:\学习\Node.js\实践项目\第三方工具\GLUP> npm install uglify

up to date in 1s

（2）引入插件

1. 引入gulp-babel插件
2. 引入gulp-uglify插件

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

（3）建立任务

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）执行任务

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> gulp jsmin
[19:52:33] Using gulpfile D:\学习\Node.js\实践项目\第三方工具\GLUP\gulpfile.js
[19:52:33] Starting 'jsmin'...
[19:52:33] Finished 'jsmin' after 11 ms

4.gulp-copy：复制目录到指定目录下

实践步骤：

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

//建立任务：copy
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’

PS D:\学习\Node.js\实践项目\第三方工具\GLUP>
                                             gulp copy
[20:29:54] Using gulpfile D:\学习\Node.js\实践项目\第三方工具\GLUP\gulpfile.js
[20:29:54] Starting 'copy'...
[20:29:54] Finished 'copy' after 11 ms

 5.gulp-default：执行全部构建任务

学习心得：使用gulp.series()按顺序执行任务。通过使用命令“gulp 任务名”去执行单个任务，实现执行一个任务，其他任务也一起执行。

实践步骤：

（1） 在gulpfile.js文件中创建default任务

//构建任务
//使用gulp.series()方法
gulp.task('default',gulp.series('first','htmlmin','cssmin','jsmin','copy'))

（2）运行命令‘gulp default

PS D:\学习\Node.js\实践项目\第三方工具\GLUP> gulp default
[20:34:37] Using gulpfile D:\学习\Node.js\实践项目\第三方工具\GLUP\gulpfile.js
[20:34:37] Starting 'default'...
[20:34:37] Starting 'first'...
[20:34:37] Finished 'first' after 10 ms
[20:34:37] Starting 'htmlmin'...
[20:34:37] Finished 'htmlmin' after 4.95 ms
[20:34:37] Starting 'cssmin'...
[20:34:37] 'cssmin' 3.22 ms

’