![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
gulp
火鸡面多放火鸡
简单分享一下前端知识
展开
-
封装一个gulp-cli模块
封装一个gulp-cli模块一、新建项目1.1、新建github仓库1.2、新建空目录二、开发模块2.1、配置依赖2.2、设置入口文件2.3、cli执行入口三、测试模块四、发布模块一、新建项目1.1、新建github仓库在github上新建一个仓库用来提交模块代码,以及发布到npm上,仓库名与等会的cli模块名保持一致,我这里就都叫 hu-gulp-demo 。1.2、新建空目录yarn global add zce-cli为了图方便,这里我直接使用了拉钩教育汪磊老师的模板创建项目结构,真香。原创 2020-11-21 12:50:05 · 193 阅读 · 0 评论 -
Gulp解决引入node_modules下的js/css文件路径问题
Gulp解决引入node_modules下的js/css文件路径问题使用gulp-useref插件使用gulp-useref插件在我们将文件构建到dist目录下后,我们的html会有一些对node_modules下的文件的依赖,例如jquery.js和bootstrap.css,这些文件并没有拷贝到我们的dist目录,这样我们部署上线就会找不到这些文件。这时候我们就可以借助到gulp-useref插件,这个插件会自动去处理html当中的构建注释,例如: <!-- build:css asset原创 2020-11-19 14:45:12 · 2223 阅读 · 0 评论 -
Gulp开发服务器
Gulp开发服务器一、安装browser-sync二、创建服务器三、启动服务器四、了解一些服务器配置以及热更新一、安装browser-syncyarn add browser-sync --dev二、创建服务器const browserSync = require("browser-sync")const bs = browserSync.create() // 创建一个开发服务器三、启动服务器// 启动服务const serve = () => { bs.init({ //原创 2020-11-18 19:19:29 · 177 阅读 · 0 评论 -
在Gulp中的使用插件进行文件操作
在Gulp中的使用插件进行文件操作一、使用gulp-sass转换scss文件二、使用gulp-babel转换js文件三、使用模板引擎插件gulp-swig用于处理html文件四、使用gulp-imagemin插件转换图片和字体五、使用gulp-load-plugins避免重复引入插件动作六、使用del插件清除文件七、梳理代码一、使用gulp-sass转换scss文件先单独为node-sass配置镜像源yarn config set sass_binary_site http://cdn.npm.tao原创 2020-11-18 17:05:25 · 212 阅读 · 0 评论 -
Gulp入门学习
Gulp入门学习一、安装Gulp二、gulp的组合任务series和parallel三、gulp异步任务的三种方式一、安装Gulp新建一个空项目,初始化项目yarn init --yes安装gulp为开发依赖yarn add gulp --dev安装gulp的同时会安装一个叫gulp-cli的模块,也就是说我们此时在node_modules文件下会出现一个gulp的命令,有了这个命令在后续的时候我们就可以通过gulp命令去构建我们的任务新建一个gulpfile.js文件作为入口文件code gul原创 2020-11-18 14:25:24 · 206 阅读 · 0 评论