![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
自动化构建
火鸡面多放火鸡
简单分享一下前端知识
展开
-
简单了解一下FIS
简单了解一下FIS一、基本使用二、fis的编译与压缩2.1、编译scss2.2、编译js2.3、压缩三、respect一、基本使用安装yarn global add fis3因为fis3.0版本相较于之前版本有了很大变化,所以单独取名为fis3使用fis3 releaserelease方法是fis3当中默认的构建任务,这个构建任务会将项目中所有需要被构建的文件自动构建到一个临时目录当中,这个目录一般在用户目录中可以找到我们也可以指定构建输出目录fis3 release -d outp原创 2020-11-21 15:45:30 · 645 阅读 · 0 评论 -
封装一个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 评论 -
了解Grunt相关内容
该如何使用Grunt一、安装grunt二、定义grunt任务三、grunt标记错误失败四、grunt配置选项五、多目标任务六、grunt插件的使用6.1、grunt-contrib-clean6.2、grunt-sass6.3、grunt-babel6.4、grunt-contrib-watch一、安装grunt新建项目npm init -y安装gruntnpm i grunt新建gruntfile.js文件gruntfile.js文件是Grunt的入口文件,用于定义一些需要Grunt自动原创 2020-11-17 19:07:04 · 221 阅读 · 0 评论 -
使用NPM Scripts实现自动化构建
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档自动化构建一、自动化构建简介二、使用NPM Scripts实现自动化构建2.1、分解流程2.2、整体流程三、总结一、自动化构建简介自动化:指的就是通过机器去代替手工去完成一些工作构建:可以理解成转换,就是把一些东西转换成另外一些东西总的来说,自动化构建就是把开发阶段写出来的源代码自动化地去转换成生产环境中可以运行的代码或者程序。一般我们会把这个转换的过程称为自动化构建工作流,它的作用就是让我们尽可能脱离运行环境兼容带来的问题,在开原创 2020-11-17 15:48:24 · 458 阅读 · 0 评论