UI框架集成

ui框架

---

一、postcss

这是一个基于node.js的postcss工具，是一个css处理工具：

npm i postcss-cli@6.1.3 -D

打包命令：

npx postcss src/ui.css -o dist/ui.css

格式：npx postcss 要处理的 CSS 文件位置 -o 生成目标文件的位置

二、对@import的处理

npm i postcss-import@12.0.1 -D

这个插件可以把@import方式引入的本地路径转变成css语句。安装以后，就可以加入这个插件完成对@import的处理。

npx postcss src/tuitui-ui.css -o dist/tuitui-ui.css -u postcss-import --no-map

处理后，各个文件的内容就会被集成到一个文件里。

@Tip: 1、字体库等远程 @import 不会被替换 ，但会提到文件的最前面； 2、如果需要处理图片的项目可以使用“postcss-url”来处理图片的路径问题。

三、对兼容性的处理

npm i autoprefixer@9.6.1 -D

之后使用插件

npx postcss src/ui.css -o dist/ui.css -u postcss-import autoprefixer --no-map

默认情况下, autoprefixer 会给没有废弃的且占有率 > 0.5%或者是最新发布的两个版本以内的浏览器提供兼容支持,但是这种配置不一定安全，可以自行编写兼容性配置规则：

//根目录上简历.browserslistrc文件
> 0.5%
last 2 version
not ie <= 10
not ie_mob <= 10

四、压缩CSS文件

安装cssnano插件

npm i cssnano@4.1.10 -D

执行压缩等命令

npx postcss src/ui.css -o dist/ui.min.css -u postcss-import autoprefixer cssnano --no-map

执行完这条命令以后,原来文件中的注释和空格就都被去掉了,最后会生成一个新的 /dist/ui.min.css

五、shell脚本的编写

我们先在根目录下建一个名为“shell”的目录,然后在里面放一个“build.sh”的文件：

# 清空dist目录中的旧文件
echo '正在清除原有dist文件...'
rm -rf dist/*.css

# 打包出不压缩的CSS文件ui.css
echo '正在生成ui.css文件...'
npx postcss src/ui.css -o dist/ui.css -u postcss-import autoprefixer --no-map 

# 打包出被压缩的CSS文件ui.min.css
echo '正在生成ui.min.css文件...'
npx postcss src/ui.css -o dist/ui.min.css -u postcss-import autoprefixer cssnano --no-map 

制作完这个脚本以后,再想打包项目，执行：

./shell/build.sh