用node里面的gulp实现简单的压缩代码并实现实时刷新功能的小服务器【项目里面的gulpfile.js文件】

// 在这里书写 代码 让需要打包的文件打包压缩 成上线的文件

const gulp = require('gulp');

// 1.先写一个删除dist的方法 用到的是第三方的del库 先引入
const del = require('del');
const delHeadler = () => {
    return del(['./dist']);
}
// module.exports.del = delHeadler;

// 2. 写一个压缩并发送html到dist的方法  需要的第三方库是gulp-htmlmin
const htmlmin = require('gulp-htmlmin');
const htmlHeadler = () => {
    return gulp.src('./src/pages/**')
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true,
            removeScriptTypeAttributes: true,
            minifyCSS: true,
            // removeTagWhitespace: true,
            minifyJS: true,
            collapseInlineTagWhitespace: true,
            collapseBooleanAttributes: true,
        }))
        .pipe(gulp.dest('./dist/pages'));

}
// module.exports.html = htmlHeadler;
// 3. 写一个压缩并发送css到dist 的方法  需要的第三方库是gulp-cssmin   在压缩css代码的时候 有一个gulp-autoprefixer 可以添加浏览器前缀 但是需要到package.json中添加一个键值对指定浏览器webserverlist  先引入gulp-autoprefixer  这个插件直接设置是没有作用的 还需要到package.json中设置browerslist的默认支持浏览器版本
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require('gulp-cssmin');
const cssHeadler = () => {
    return gulp.src('./src/css/**')
        .pipe(autoprefixer())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'));
}
// module.exports.css = cssHeadler;
// 4.写一个移动lib到dist里面的方法
const libHeadler = () => {
    return gulp.src('./src/lib/**').pipe(gulp.dest('./dist/lib'));
}
// module.exports.lib = libHeadler;
// 5.压缩打包js代码到dist里面 用到的第三方库是gulp-uglify  gulp-babel 这个第三方包会将es6语法转为es5语法 虽然其依赖@babel/core 和 @babel/preset-env但是只需要导入gulp-babel就行 它自己依赖的它自己会去导入
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const jsHeadler = () => {
    return gulp.src('./src/js/**')
        .pipe(babel({
            presets: ['@babel/env']
        })) // 注意这里不要把babel和uglify交换位置了 不然es6能转为es5但是会压缩不成功
        .pipe(uglify()) // 先es6转es5 再 压缩
        .pipe(gulp.dest('./dist/js'));
}
module.exports.js = jsHeadler;
// 6. 写一个方法将src下面的images 移动到 dist里面去
const imagesHeadler = () => {
    return gulp.src('./src/images/**').pipe(gulp.dest('./dist/images'));
}
// module.exports.images = imagesHeadler;

// gulp除了能全部 把文件打包 还能创建一个微服务器  实现实时刷新的功能 使用第三方包 (先下载 在引入) gulp-webserrver 所以需要引入   
// 7 搭建一个服务器  
const webserver = require('gulp-webserver');
const webserverHandler = () => {
    return gulp.src("./dist") // 找到要打开网站的文件夹  并且把这个目录作为网站的根目录
        .pipe(webserver({ // 要执行的操作 也就是对网站的一些配置 信息
            port: 8080,
            host: 'localhost',
            open: "./pages/index.html", // 默认打开的页面
            // 实时刷新
            livereload: true,
            // 还可以做反向代理 这里把做好的 天气查询放进来 
            proxies: [ //  可以做多个代理 一个对象就是一个代理
                {
                    source: "/weather",
                    target: "https://way.jd.com/he/freeweather;"
                }
            ]
        }))
}

// module.exports.webserver = webserverHandler;

// 每次运行都要输每一个文件 很麻烦  所以做一个总开关  default     然后呢 运行的时候可以省略   使用到gulp的两个方法 series 串行运行  parallel 并行执行    
// 所以其他的 单个运行 代码就可以注释了

// 虽然 现在打开的服务器能够自动刷新了  但是我=我们写代码的时候是在src里面写的 不是在dist里面写的  所以还需要建立src与dist之间的联系   使得dist可以实时刷新代码  不然的话 就改不了代码了 所以 需要gulp的一个方法 watch 

const watchHeadler = () => {
    gulp.watch('./src/pages/**', htmlHeadler);
    gulp.watch('./src/css/*.css', cssHeadler);
    gulp.watch('./src/js/*.js', jsHeadler);
    gulp.watch('./src/lib/**', libHeadler);
    gulp.watch('./src/images/**', imagesHeadler);
}


module.exports.default = gulp.series(
    delHeadler, gulp.parallel(imagesHeadler, libHeadler, jsHeadler, cssHeadler, htmlHeadler),
    webserverHandler,
    watchHeadler
)