第三方模块Gulp

Gulp是基于node平台开发的前端构建工具

将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了

用机器代替手工，提高开发效率

1. Gulp能做什么：

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

2. Gulp使用：
① 使用npm install gulp下载gulp文件。 注意：库文件都是本地安装，不需要加-g
② 在项目根目录下建立gulpfile.js文件。gulpfile.js文件的名字是gulp要求的，不能随意更改
③ 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
④ 在gulpfile.js文件中编写任务
⑤ 在命令行工具中执行gulp任务

3. Gulp中提供的方法：

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

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

注意：必须要把处理的代码写在.pipe里

如何执行这个任务呢？如果使用node gulpfile.js则执行的是gulpfile.js整个文件。而我们需要执行的是当前这个文件中的first任务，我们可以使用gulp命令来执行这个文件。

下载gulp命令行工具：npm install gulp-cli -g注意不是库文件，需要全局安装

下载完成之后，命令行中多了一个命令：gulp first

4. Gulp插件：

gulp属于轻内核的第三方模块，提供的方法非常少，所有的其他功能都是通过插件的方式实现。

• gulp-htmlmin：htm|文件压缩
• gulp-csso：压缩css
• gulp-babel：JavaScript语法转化
• gulp-less：less语法转化
• gulp-uglity：压缩混淆JavaScript
• gulp-file-include：公共文件包含

在html中先抽离出公共的代码，然后再引入，gulp中使用@@include引入：

// 引入公共的头部部分
@@include(‘./common/header.html‘);

• browsersync：浏览器实时同步

// 引用gulp模块
const gulp = require(‘gulp‘);
const htmlmin = require(‘gulp-htmlmin‘);
const fileinclude = require(‘gulp-file-include‘);
const less = require(‘gulp-less‘);
const csso = require(‘gulp-csso‘);
const babel = require(‘gulp-babel‘);
const uglify = require(‘gulp-uglify‘);

// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task(‘htmlmin‘, () => {
    // src目录下的所有html文件
    gulp.src(‘./src/*.html‘)
          .pipe(fileinclude())
          // 压缩html文件中的代码, collapseWhitespace为是否压缩空格
          .pipe(htmlmin({ collapseWhitespace:true }))
          .pipe(gulp.dest(‘dist‘));

});

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

// js任务
// 1. es6代码转换
// 2. 代码压缩
// 安装babel模块：npm install --save gulp-babel @babel/core @babel/preset-env
// @babel/core @babel/preset-env是gulp-babel所依赖的模块
gulp.task(‘jsmin‘, () => {
    gulp.src(‘./src/js/*.js‘)
          // 将less语法转换为css语法
          .pipe(babel({
                // 它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
                presets: [‘@babel/env‘]
          }))
          .pipe(uglify())
          // 将处理结果进行输出
          .pipe(gulp.dest(‘dist/js‘));
});

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

如果想要执行一个命令，其他的所有任务就会自动执行，那就需要进行gulp构建任务：

// 构建任务
// 输入命令gulp default，则其他任务也就会自动执行
gulp.task(‘default‘, [‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘]);