4.2 node 第三方模块（包）

第三方模块 Gulp

基于node 平台开发的前端构建工具
将机械化操作编写出任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机械代替手工，提高开发效率

1、Gulp能做什么

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

2、Gulp使用

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

3、Gulp中提供的方法

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

//应用gulp模块
const gulp = require('gulp');
//使用gulp.tast建立任务
//1、任务的名称
//2、任务的回调函数
gulp.task('first',() => {
    console.log('第一个gulp');
    //1、使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'));
});

在Windows PowerShell中执行以下操作
npm install gulp-cli -g 先全局安装gulp-cli
gulp first

4、Gulp插件

• gulp-htmlmin: html文件压缩
• gulp-csso: 压缩css
• gulp-babel: JavaScript语法转化
• gulp-less: less语法转化
• gulp-uglify: 压缩混淆JavaScript
• gulp-file-include: 公共文件包含
• browsersync: 浏览器实时同步

//html 任务

//使用之前先安装gulp-htmlmin、gulp-file-include
//npm install gulp-htmlmin; npm install gulp-file-include

const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

//1、html文件中代码的压缩文件
//2、抽取html文件中的公共代码
gulp.task('html_min',() => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
});

//css任务
//使用之前先安装gulp-less、gulp-csso
//npm install gulp-less ; npm install gulp-csso
const less = require('gulp-less');
const csso = require('gulp-csso');
//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任务
//npm install npm install gulp-babel @babel/core @babel/preset-env 
//npm install npm install gulp-uglify 
//使用之前先安装；一次下载多个，用空格隔开即可
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
//1、es6代码转换
//2、代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .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.task('default',['html_min','cssmin','jsmin','copy']);