javaScript学习笔记day32————gulp

最新推荐文章于 2022-10-11 00:36:28 发布

huli1219

最新推荐文章于 2022-10-11 00:36:28 发布

阅读量583

点赞数

文章标签： javascript gulp 前端

本文链接：https://blog.csdn.net/huli1219/article/details/121852431

版权

概念

gulp是一个自动化打包构建的一个工具，把我所写的文件压缩到指定的文件夹中；但它需要依赖一个node环境

gulp的安装：所以我们要在node中下载它npm i gulp -g 检测一下版本gulp -v cnpm i gulp -g;

全局变量：gulp是一个工具，也是一个第三方模块，

项目依赖：是一个插件，第三模块，会在项目中使用到

压缩文件

压缩文件的步骤：

创建项目源码的目录结构

npm init 生成项目的目录机构

创建项目结构（项目中所需要的文件夹）

安装gulp依赖，npm install--save-dev gulp

创建一个gulp的配置文件gulpfile.js；

配置gulpfile文件：

在gulpfile.js中导入gulp 依赖的‘npm install --save-dev’ v4版本

使用gulp创建一个压缩任务（在gulpfile.js写任务）

让gulp 的命令行中跑起来，帮我们执行压缩gulp任务名称

创建压缩任务：

把gulp模块引入gulpfile.js文件中
声明一个函数压缩任务的函数：function css()，并且这个函数中必须有returen
在这个函数中写任务：

gulp.src(需要压缩的 css 文件地址)
找到这些文件之后，就进行压缩 gulp.pipe() 这个方法就是帮我们做事情的，你可以在中这个括号中写正则把空格去掉，但是这样比较麻烦，已经有别人写好了这个插件（gulp-cssmin），我们直接下载就可以了 -D 就是--save-dev 的缩写
把压缩的文件放到指定的文件夹中 gulp.dest('你要放到哪里') + pipe(gulp.dest('文件路径')) + gulp.dest() 是一个方法，需要用 pipe() 来执行
必须要用exports把函数导出才能使用
gulpCss回车能得到结果

  function css() {
        return gulp
            .src("./src/css/**")
            .pipe(cssmin())
            .pipe(gulp.dest("./dist/css"));
    }
exports.gulpCss = css;

压缩文件的第三模块：压缩css

压缩css

npm i gulp-cssmin -D

压缩js

npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-env
npm i -D gulp-gulify
创建压缩js的代码
压缩 js 代码，必须先把 ES6 的代码转化为 es5 才能压缩 babel 就是转化的

function js() {
    return gulp
        .src("./src/js/**")
        .pipe(
            babel({
                presets: ["env"],
            })
        )
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js"));
}

压缩html

cnpm i -D gulp-htmlmin
创建压缩html的代码
压缩 HTML 的时候必须传递一个参数，为对象

    {
        collapseWhitespace: true, // 表示去除空格
        removeEmptyAttributes: true, // 移出空的属性
        minifyCSS: true, // 压缩 style 标签
        minifyJS: true, // 压缩 script 标签
    }

清除缓存

npm i -D gulp-clean


function clean() {
    return gulp.src(["./dist"]).pipe(gulpclean());
}

创建一个多任务执行的任务

gulp.series() 按顺序依次执行同步执行，前面的任务执行完成之后在执行后面的任务gulp.parallel() 一起的任务同时执行异步执行，会同时开启所有的任务，谁先执行完

exports.build = gulp.series(clean, css, js, html, data, static);

在命令行 `gulp build` 就相当于执行这个两个方法中的所有任务

创建一个压缩完之后打开浏览器的服务

下载gulp-webserver模块
npm install gulp-webserver

导入模块：webserver需要传递一个参数

function webserver() {
        return gulp.src("./dist").pipe(
            webservers({
                host: "localhost", // 域名
                port: 3000, // 监听的端口号，统一写 3000
                open: "./html/index.html", // 打开的页面，相对于 dist 文件夹来的目录
                livereload: true, // 浏览器自动刷新,
                proxies: [
                    {
                        source: "/api", //随便起，相当于你要请求接口的替换名 ajax请求时就用这个名字
                        target: "https://www.duitang.com/", //需要请求的接口
                    },
                    {
                        source: "/maoyan", //随便起，相当于你要请求接口的替换名 ajax请求时就用这个名字
                        target: "http://gz2107.com", //需要请求的接口
                    }
                ],
            })
        );
    }

创建一个实时监听的任务（需要用到gulp.watch()）

function watchs() {
    gulp.watch("./src/css", css);
    gulp.watch("./src/js", js);
    gulp.watch("./src/html", html);
    gulp.watch("./src/data", data);
    gulp.watch("./src/static", static);
}

导出模块：

// 必须要导出 只有导出之后 才能之后在命令行中执行这个任务 才会去执行压缩的代码
exports.css = css;
exports.js = js;
exports.html = html;
exports.img = img;
exports.data = data;
exports.clean = clear;
exports.server = server;
exports.babelPlitfill = babelPlitfill

exports.build = gulp.series(clear,
    gulp.parallel(css, indexHtml, html, js, bootstrap, img,data,babelPlitfill),
    server, watch)

复制某个模块：

function img() {
    return gulp.src("./src/img/**").pipe(gulp.dest("./dist/img"));
}

function bootstrap() {
    return gulp.src('./src/bootstrap/**').pipe(gulp.dest("./dist/bootstrap"));
}
function data() {
    return gulp.src("./src/data/**").pipe(gulp.dest("./dist/data"));
}