[系统运维]自动化构建工具gulp

1，gulp是什么？

????????? 自动构建工具，将重复的工作自动化，例如：编译less，压缩css，压缩js等等

2，为什么要学习gulp?

????????（1）重复工作自动化

????????（2）少部分公司使用，看懂gulpfile.js

3，使用gulp

????????3.1 安装

????????????? （1）项目目录初始化，生成package.json

npm init

????????????? （2）全局安装gulp

npm i gulp-cli -g

???????????? （3）局部安装gulp

npm i gulp -D

???????????? （4）测试是否安装成功

gulp -v

如图安装成功

??????? 3.2 根目录下新建gulpfile.js(名字必须一致)内容如下

const { src, dest, parallel,watch } = require('gulp');//导入gulp

//导入其他的插件
const less = require("gulp-less");?//?编译less插件 cnpm i gulp-less -D
const cleanCss = require("gulp-clean-css");?//?压缩css插件 cnpm i gulp-clean-css -D
const rename = require("gulp-rename");?//?重命名插件 cnpm i gulp-rename -D
const uglify = require("gulp-uglify");?//?压缩js插件 cnpm i gulp-uglify -D
const browserSync = require("browser-sync").create();?//?启动服务器插件 cnpm i browser-sync -D
const?reload?=?browserSync.reload;?//?热加载
//写任务

//编译less
function css() {
    return src("./less/*.less")?//?要处理的文件源
        .pipe(less())?//?编译 less==>css
        .pipe(cleanCss())//压缩css
        .pipe(
            rename({
                suffix: ".min"
            })
        )//重命名
        .pipe(dest("./dist/css"))?//?输出
        .pipe(reload({?//?热加载
            ??????stream:?true
            ????}))
}

//压缩js
function js() {
    return src("./js/*.js")//要处理的源文件
        .pipe(uglify())//压缩
        .pipe(
            rename({
                suffix: ".min"
            })
        )//重命名
        .pipe(dest("./dist/js"))?//?输出
        .pipe(reload({?//?热加载
            ??????stream:?true
            ????}))
}
//启动服务的任务
function serve() {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        port: 3033
    });
}

//上帝之眼[观察者模式]
function auto(){
    watch("./less/*.less",?css);?//?css
??  watch("./js/*.js",?js);?//?js
??  watch("**/*.html").on("change",?reload)?//?html
}




//暴露任务
exports.css = css;//gulp css
exports.js = js;//gulp js
exports.serve=serve;//gulp  serve
exports.default = parallel(serve, css, js,auto); //默认  gulp


/*
    FTP:21
    HTTP:80
    HTTPS:443
    MySQL:3306
*/ 

4，gulp创建服务器和默认启动