yazi 前端脚手架

2024-05-26 05:55:09

前端自动化工程

Installation

sudo npm install -g yazi

Getting To Know yazi

初始化前端脚手架 init

yazi mb init
yazi pc init

生成前端项目脚手架，脚手架目录：

[test-613]| -- package.json| -- [src]|     | -- [images]|     |     | -- [slice]|     | -- index.html|     | -- [js]|     |     | -- index.js|     | -- [less]|     |     | -- style.less|     | -- [lib]

当前yazi版本生成的脚手架只常规的符合commonjs规范。并没有支持vue，react等。

根据mb/pc不同生成的脚手架具体内容不同，比如html头信息不同。

browser-sync实时调试 dev

yazi dev

调试模式下打开默认打开localhost:8000页面。
在调试过程中支持

es6编译
less编译
书写js的commonJS规范（require）

可以在项目中进行npm install xxx --save

项目构建 build

yazi build -s 1
yazi build -s 2
yazi build

yazi build

将src文件夹内的项目文件构建并生成build文件夹。

其中包含：

es6编译混淆压缩
less编译
图片压缩

注意事项：

需要进行雪碧图转换的图片需要放在images/slice文件下内，并且在css中需要使用background-image属性引用图片。

.test1 {width: 30px;height: 30px;background-image: url('../images/slice/img1.png');
}

yazi build -s 1

将src文件夹内的项目文件构建并生成build文件夹，并将图片转换为雪碧图，修改对应css。

此处的 -s 1表示sprite雪碧图设置，并且在普通屏幕上使用（pc和非retina屏）

yazi build -s 2

将src文件夹内的项目文件构建并生成build文件夹，并将图片转换为雪碧图，修改对应css。

此处的 -s 2表示sprite雪碧图设置，并且在retina屏使用。

TODO

[ ] 添加一些处理css的gulp插件
[ ] build时图片进行七牛空间自动上传。

License

MIT © 南洋
github

yazi 前端脚手架相关推荐

基于gulp的前端脚手架（二）
几天前搭了个小型的gulp自动化脚手架,运用到实际项目中发现还有一些小问题,今天来统一修复一下. 文章链接基于gulp的前端脚手架(一) 存在的问题雪碧图相关 1.使用2倍图后,若2倍图尺寸不是1 ...
使用Yeoman定制前端脚手架
首先附上Yeoman官网:yeoman.io/ 我制作的前端脚手架:generator-jake-front 以及我在前端同学的分享会上的分享ppt:yeoman.key 如果想快速制作一个脚手架,并 ...
手写一个合格的前端脚手架
为什么我们需要一套脚手架为什么我们需要一套脚手架,它能帮助我们解决哪些痛点问题. •前端项目配置越来越繁琐.耗时,重复无意义的工作•项目结构不统一.不规范•前端项目类型繁多,不同项目不同配置,管理成 ...
npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具（包括，npm包的发布，脚手架的搭建，注意事项，优化等）...
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近.先是带来了Gulp.Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了 ...
前端脚手架是指什么？
前端脚手架是指什么? 前端开发中提bai到的"脚手架"是一个形象的比喻,比喻各类语言的前期工作环境. 在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要 ...
php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli. 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找 ...
从0搭建前端脚手架详解（小白也可以搭建）
本篇文章用来为大家提供一个搭建简易前端脚手架的思路. 先来看一眼实现的效果. 从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的. 也就是上图这句,创建一个新项目,只需 ...
前端脚手架搭建（part 1）
本篇主要介绍如何搭建前端脚手架,一步一步地实现通过搭建的脚手架下载对应的项目模板. 通过脚手架的创建,可以快速搭建项目的基础配置和模板,在部门项目开发的规范中尤其总要. 初始化项目: 创建一个文件夹, ...
什么是前端脚手架？脚手架原理？
一.站在前端研发的视角,分析开发脚手架的必要性研发效能开发脚手架的核心目标是:提升前端的研发效能大厂研发一定需要用到脚手架脚手架核心价值将研发过程: 自动化:项目重复代码拷贝/git 操作/ ...

最新文章

热门文章