Gulp的安装以及使用

一、gulp的安装

1. 全局安装gulp-cli

(1)通过npm工具下载安装gulp-cli插件,命令如下：

npm install gulp-cli@2.3.0 -g

(2)打开命令行工具，运行“gulp - v”命令，如果gulp -cli安装成功，结果如图所示：

2. 在项目中安装gulp

（1）使用npm工具初始化项目,命令如下

npm init

执行该命令后，会创建一个package.json新文件，该文件保存了项目所有的Node.js模块信息和版本

（2）局部安装gulp

npm install gulp@4.0.2 --save-dev

执行该命令后，会在项目根目录下生成一个node_modoules目录和package-lockjson文件

(3)打开命令行工具，运行“gulp - v”命令，如果gulp -cli安装成功，结果如图所示：

3.构建项目

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

（2）重构项目的文件夹结构 src目录放置源代码文件 ，dist目录放置构建后文件

（3）在gulpfile.js文件中编写构建项目的任务，代码如下，

//引用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();
})

(4)打开命令行工具，运行“gulp - first”命令

gulp first

二、gulp的使用

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

（1）通过npm工具下载安装gulp-htmlmin插件,命令如下：

npm install gulp-htmlmin

（2）通过npm工具下载安装gulp-htmlmin插件,命令如下：

npm install gulp-file-include

（3）在gulpfile.js文件中 引入htmlmin插件

const htmlmin = require('gulp-htmlmin')

（4）在gulpfile.js文件中 引入gulp-file-include插件

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

（5）在gulpfile.js文件中调用gulp-htmlmin插件，实现对html文件中的代码的压缩，

在gulpfile.js文件中调用gulp-file-include插件，抽取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();
})

（6）在demo\src目录下新建common目录，在common目录下创建header.html，并且把头部公共部分粘贴到header.html文件中

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

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

（8）打开命令后工具，运行命令gulp htmlmin。

gulp任务执行成功后，打开dist目录下default.html和article.html文件，查看代码会发现这两个文件中都包含header部分代码

2. 压缩并转换Less语法

(1)通过npm工具下载安装gulp-less插件,命令如下：

npm install gulp-less

(2)通过npm工具下载安装gulp-csso插件,命令如下：

npm install gulp-csso

（3）在gulpfile.js文件中 引入gulp-less插件

const less = require('gulp-less')

（4）在gulpfile.js文件中 引入gulp-csso插件

const cssmin = require('gulp-csso')

(5)在css文件夹下面建.less后缀的文件,并且写入以下代码

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

    .son {
        font-weight: bold;
    }
}

（6）在gulpfile.js文件中调用gulp-less插件，实现将Less的代码语法转换为CSS语法，

在gulpfile.js文件中调用gulp-csso插件，对css代码进行压缩，示例如下:

// 建立任务：转换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();
})

（7）打开命令后工具，运行命令gulp cssmin

gulp cssmin

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

（1）通过npm工具下载安装gulp-babel插件以及它的依赖模块，实现ES6的转换,命令如下

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

（2）通过npm工具下载安装gulp-uglify插件,命令如下

npm install gulp-uglify

（3）在gulpfile.js文件中 引入gulp-babel插件

const babel = require('gulp-babel')

（4）在gulpfile.js文件中 引入gulp-uglify插件

const uglify = require('gulp-uglify')

（5）在gulpfile.js文件中调用gulp-babel插件，实现ES6的转换，

在gulpfile.js文件中调用gulp-uglify插件，对JavaScript代码进行压缩，示例如下:

// 建立任务：转换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();
})

（6）打开命令后工具，运行命令gulp jsmin

gulp jsmin

4. 复制目录

（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();
})

（2）打开命令后工具，运行命令gulp copy

gulp copy