构建小能手---Gulp

Gulp

1. 基于node平台开发的前端构建工具（node第三方模块）
2. 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
3. 用机器代替手工，提高开发效率。

1.Gulp能做什么

1. 项目上线，HTML、CSS、JS文件压缩合并
2. 语法转换（es6、less …）
3. 公共文件抽离
4. 修改文件浏览器自动刷新

2.Gulp使用

1. 使用npm install gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务.
5. 在命令行工具中执行gulp任务（安装gulp-cli命令行工具执行gulp任务）

3.Gulp中提供的方法

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

const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

实例（用gulp拷贝一个文件）：

4.Gulp插件

1. 插件比较多，我们做到会用即可，此处举出几个常用的插件作为演示
2. 使用插件可参考官网：npm官网

• gulp-htmlmin ：html文件压缩
• gulp-csso ：压缩css
• gulp-babel ：JavaScript语法转化
• gulp-less: less语法转化
• gulp-uglify ：压缩混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync 浏览器实时同步
  总结：插件的使用步骤：安装->引入->调用

4.1演示

1.html任务（代码压缩，公共部分抽离）

// 引用gulp模块
const gulp = require('gulp');
// 引入处理HTML代码的模块
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

// html任务
// 1，html文件中代码压缩
// 2，抽取html文件中公共代码
gulp.task('htmlmin', async() => {
    // 压缩src目录下所有HTML代码
    await gulp.src('./src/*.html')
        // 公共部分抽离
        .pipe(fileinclude())
        // 去除代码空格
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'))
});

注意：公共部分抽离时要写入模块提供的方法，把公共部分填入代码区（ @@include(’./common/hander.html’)），压缩后，公共部分代码依旧还在。

2.css任务（代码压缩，less文件转换成css文件）

// 引入处理css的文件
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1，less文件转换成css文件
// 2，css文件的压缩
gulp.task('cssmin', async() => {
    // 选择css目录下所有的less文件以及css文件
    await gulp.src(['./src/css/*.less', './src/css/*.css'])
        // less文件转换成css文件
        .pipe(less())
        // css代码压缩
        .pipe(csso())
        // 将处理后的结果进行输出
        .pipe(gulp.dest('./dist/css'))
});

3.js任务（es6语法转换成es5语法，js代码压缩）

const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// js任务
// 1，es6语法转换为es5语法
// 2，js代码的压缩
gulp.task('jsmin', async() => {
    await gulp.src('./src/js/test.js')
        .pipe(babel({
            // 他可以判断当前代码运行环境，将代码转换成当前运行环境支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
});

4.复制文件夹

// 复制文件夹
gulp.task('copy', async() => {
    await gulp.src('./src/images/*')
        .pipe(gulp.dest('./dist/images'));
    await gulp.src('./src/lib/*')
        .pipe(gulp.dest('./dist/lib'));
});

5.构建全部任务

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

last：总结

1. 此处只是演示了部分插件，更多的实用功能在我们用到时自行安装
2. 再次奉上官网npm官网