19-Glup

什么是Gulp?

gulp是前端自动化构建工具

作用是什么？

1. 压缩html gulp-htmlmin
2. 编译sass gulp-sass
3. 编译less gulp-less
4. 压缩css gulp-cssnano
5. 重命名 gulp-rename
6. 压缩js gulp-uglify
7. 合并文件 gulp-concat
8. 将ES6转为ES5 gulp-babel @babel/core @babel/preset-env
9. 压缩图片 gulp-imagemin

如何安装gulp?

1. 全局安装（一个电脑只需要安装一次）

win + r 打开运行 — 输入 cmd 回车
npm||cnpm install -g gulp

局部安装gulp? (一个项目需要安装一次)

1. 准备项目结构

    项目目录（英文）
        dist  // 放置优先后的代码（自动生成的代码)
        src   //源代码（写或维护的地方）
            index.html  //首页
            html   //子页面
            sass   //css
            js     //js
            img    //img
            lib    //第三方插件

注 以下的操作必须在项目根目录中操作，每一个项目，需要操作一遍

2. 打包 ，创建package.json

npm || cnpm init [-y]

3. 局部安装所需要的插件

npm||cnpm i -D 插件名
cnpm i -D gulp gulp-htmlmin gulp-cssnano gulp-rename gulp-uglify gulp-imagemin@7 gulp-concat gulp-babel @babel/core @babel/preset-env

4. 在项目根目录下创建一个gulpfile.js的配置文件

//1. 导入模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const babel = require('gulp-babel');


//2. 发布任务
//测试任务
function fnTest(){
    console.log('呵呵');
}

//index.html
function fnIndex(){
    return gulp.src('./src/index.html')
        .pipe(gulp.dest('./dist'));
}
//css
function fnCSS(){
    return gulp.src('./src/sass/*.css')
        .pipe(cssnano())
        .pipe(rename({suffix : '.min'}))
        .pipe(gulp.dest('./dist/css'));
}
//js
function fnJS(){
    return gulp.src('./src/js/*.js')
        // 压缩
        /*  .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('index.js')) */

        .pipe(uglify())
        .pipe(rename({suffix : '.min'}))
        .pipe(gulp.dest('./dist/js'));
}
//img
function fnImg(){
    return gulp.src('./src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'));
}
//html
function fnHTML(){
    return gulp.src('./src/html/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('./dist/html'));
}
//lib
function fnLib(){
    return gulp.src('./src/lib/*')
    .pipe(gulp.dest('./dist/lib'));
}
//监听任务
function fnWatch(){
    gulp.watch('./src/index.html',fnIndex);
    gulp.watch('./src/sass/*.css',fnCSS);
    gulp.watch('./src/js/*.js',fnJS);
    gulp.watch('./src/img/*',fnImg);
    gulp.watch('./src/html/*.html',fnHTML);
    gulp.watch('./src/lib/*',fnLib);
}
//3. 导出模块
exports.test = fnTest;
exports.index = fnIndex;
exports.css = fnCSS;
exports.js = fnJS;
exports.img = fnImg;
exports.default = fnWatch;
exports.html = fnHTML;
exports.lib = fnLib;

5. 运行任务

gulp 任务名
如果任务名是default 那么直接输入 gulp回车
注 ： 在运行监听任务前，务必先运行一次单任务！！！！！

ES6的模块化

1. export : 导出模块

2. import : 导入模块

3. 模块化的使用

先定义模块，后导出模块

//先定义模块
let user = '张三';
let age = 18;
let showName = () => {
    return user;
}

//导出模块
export {user,age,showName};


//导入模块
import {user,age,showName} from './tools.js';

边定义模块，边导出模块

//边定义模块，边导出模块
export let user = '李四';
export let age = 18;
export let showName = () => {
    return user;
}


//导入模块
import {user,age,showName} from './tools.js';

以别名方式导出

//以别名方式导出
let a = '王五';
let b = 19;
let c = () => {
    return a;
}

export {a as user,b as age,c as showName};

导出默认模块

let user = '赵六';
let age = 20;
let showName = () => {
    return user;
}

export {user,age};
export default showName;



//导入模块
//导入模块
import {user,age} from './tools.js';
import hehe from './tools.js'; //导入默认模块