gulp---

//引入该模块
const  gulp = require('gulp');
//安装完gulp-htmlmin必须引入
const  htmlmin=require('gulp-htmlmin')
//函数名符合规范
//细节1函数名
function htmlm(done) {//细节2done
//输入
    gulp.src('./src/**/*.html')
//处理
    .pipe(htmlmin({collapseWhitespace: true}))
//输出
    .pipe(gulp.dest('./dist'))
    done()//细节三done（）
}
//细节四
exports.htmlm=htmlm
exports.listen=function () {
    //监听文件，执行单个任务
    gulp.watch('./src/js/*.js',es625)//**任意目录 *任意文件
    // 把多个任务合并成一个大的任务，一般用于task依赖任务和watch任务
    // gulp.watch('./src/js/*.js',gulp.series(es625,mergeJs,compressJs))
    //同时执行
    gulp.watch('./src/js/*.js',gulp.parallel(es625,mergeJs,compressJs,compileJs,htmlm))
}
//实际开发就用以下来监听
exports.server=function () {
    
}

//细节总结

函数名不能和规定冲突

done（）不要忘写

每安装一个方法后要进行一次文档得引入

细节四exports.htmlm=htmlm

细节五命令行中键入gulp 函数名

---

项目优化

    * 编译成浏览器支持的代码

        > 目的：兼容个大浏览器

    * 合并文件

        > 目的：减少http请求

    * 压缩文件

        > 目的：加快文件的下载速度

---

安装遇到问题报错得时候

--要去看看是不是网络问题下载慢没改镜像源

--管理员身份权限问题

---

合并与压缩

多一些文件没问题

然后可以合并压缩多个文件；

自调用函数记得前后加分号“；”

;()();

---

第一步

--全局安装npm i -g gulp    //为了命令行使用

第二步

--npm  init创建包管理器为了安装模块保存信息，需要使用其生成pack.json文件

第三步

--在项目文件中在安装一遍  npm i gulp//目的：为了代码在项目中引用

然后再安装之后在     根目录中创建gulpfile.js文件也就是可乐瓶图标文件

----该文件遵循commonjs规范

----在项目根目录下创建一个名为 gulpfile.js 的文件，内容如下

创建任务：

gulp是基于任务构建工具，任何操作都需要任务来完成

const gulp = require('gulp');

    gulp.task('default', function() {
        // 在命令行运行gulp命令会执行这里的代码
    });
 ```js
            // 老版本创建任务可以更好兼容老版本服浏览器
            gulp.task('es625',function(){
                // gulp工作流程
                // 1. 输入：查找目标文件
                gulp.src()

                // 2. 处理：利用各种插件、工具进行操作
                .pipe()
                .pipe()

                //3. 输出：把处理过的文件保存到硬盘
                .pipe(gulp.dest())
            })

            // 新版本创建任务
            module.exports = {
                es625:function(){

                }
            }
            exports.es625 = function(){}//建议使用该方法
        ```

4.命令行 运行任务

        ```bash

            gulp es625

        ```

在命令行执行以下命名，如果不写任务名称，则自动运行default任务（如果有）gulp es625

命令行键入：node .\gulpfile.js//运行文件

// 老版本创建任务
    gulp.task('es625',function(){
        // gulp工作流程
        // 1. 输入：查找目标文件
        gulp.src()

        // 2. 处理：利用各种插件、工具进行操作
        .pipe()
        .pipe()

        //3. 输出：把处理过的文件保存到硬盘
        .pipe(gulp.dest())
    })

    // 新版本创建任务
    module.exports = {
        es625:function(){//es625就是任务名

        }
    }
    exports.es625 = function(){}//更被推荐

运行任务gulp 任务名

done（）回调表示是否完成，同步异步操作，时间取决主线程是否空闲

---

应用

• ES6转ES5

  利用babel来进行编译，把代码转成浏览器支持的代码

• babel

  babel是工具的一个统称，实际开发中需要安装一下模块

  • @babel/core

  • @babel/preset-env

  • gulp-babel

    要在gulp中使用babel必须安装这个gulp插件

                      

                       

exports.listen=function () {
    gulp.watch('./src/js/*.js')//**任意目录 *任意文件
// 把多个任务合并成一个大的任务，一般用于task依赖任务和watch任务
    gulp.watch('./src/js/*.js',
//顺序执行
gulp.series(es625,mergeJs,compressJs))
 //同时执行
    gulp.watch('./src/js/*.js',gulp.parallel(es625,mergeJs,compressJs))
}

jq得一些运用

gulp.src('./src/**/*.js','!./src/plugins/jquery.min.js')

排除那个文件的写法

• js压缩：gulp-uglify

• 合并文件：gulp-concat

• 文件重命名：gulp-rename

用这些方法就得先在项目中安装这些方法

会查文档会看会用

---