Gulp的安装以及使用

什么是gulp？

• Gulp是一个自动化工具，前端开发者可以用它来处理常见任务：

1. 搭建web服务器

2. 文件保存时自动重载浏览器

3. 使用预处理器如LESS、Sass

4. 优化资源如压缩CSS、JavaScript、压缩图片

gulp的安装：

• 全局安装gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，在npm工具下载安装gulp-cli工具

npm install gulp-cli@2.3.0 -g

安装成功后运行“gulp -v”命令

• 在项目中安装gulp

本地gulp的作用是加载和运行gulpfile(gulpfile.js)中的构建指令，另一个作用是暴露API供gulpfile使用

npm install gulp@4.0.2 --save-dev
// 查看gulp版本，并查看是否安装成功
gulp -v

gulp的使用：

1. 在根目录下新建gulpfile.js（不可更改名称）文件

2. 在gulpfile.js文件中编写

// 引入gulp模块
const gulp = require('gulp')
// 建立任务：使用gulp.task()方法
gulp.task('first', callback => {
    // 获取文件
    gulp.src('./src/css/base.css')
    // 将处理后的文件输出到dist目录下
    // .pipe()函数作用：只是对文件处理的结果进行包装，并不会直接操作文件
    .pipe(gulp.dest('./dist/css'))
callback();
})

3. 执行gulp任务

// gulp + 任务名
gulp first

gulpAPI的常用方法：

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

gulp中常见的插件：

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

插件的使用通常分为3步：下载、引用和调用插件，需要注意的是在引用插件之前，一定要先引用gulp模块

gulp插件使用方法：

通过gulp-htmlmin 插件和 gulp-file-include插件演示如何将HTML文件中的代码进行压缩，并抽取HTML文件中的公共代码然后将处理结果输出到dist目录下

//1、安装插件
//2、引入插件
//3、gulp.task 建立任务
//4、获取文件 gulp.src()  处理文件.pipe()
//5、输出文件.pipe(dest('输出文件位置'))
 
//1、在npm中输入npm 插件名 安装插件
//引入gulp模块
const gulp = require('gulp');
 
// 引用gulp-htmlmin插件 文件压缩
const htmlmin = require('gulp-htmlmin');
 
// 引用gulp-file-include插件 引用公共部分 
const fileInclude = require('gulp-file-include');
 
//使用gulp.task()方法建立任务
/*
    参数一：任务名
    参数二：回调函数
*/
 
gulp.task('first', (callback) => {
    //获取要处理的文件
    gulp.src('./src/css/base.css')
        //将处理后的文件输出到dist目录下
        //.pipe()函数只是对文件处理的结果进行包装，并不会直接操作文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})
 
//建立任务：压缩html以及抽取公共部分
gulp.task('htmlmin', callback => {
    //获取要处理的html文件
    gulp.src('./src/*.html')
        // 抽取html文件中的公共代码
        .pipe(fileInclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        //文件的输出路径
        .pipe(gulp.dest('dist'))
    callback();
})

压缩并转化Less语法

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

压缩并转换Es6语法并复制目录

// 引入gulp-babel插件
const babel = require('gulp-babel')
// 建立任务：转换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();
})

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

执行全部构建任务

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