在前端开发中,使用 gulp 是很常见的,因为它可以让我们自动化地完成很多重复性工作。而gulp-ll这个npm包则可以帮助我们在编译Sass/Less等预处理器时,同时还能自动添加浏览器前缀。
安装
使用 npm 进行安装:
--- ------- ------- ----------
使用方法
先将gulp引入:
--- ---- - ----------------
然后 require gulp-ll
并在 Gulpfile 中添加几行代码即可轻松的使用它。
--- ---- - ---------------- --- -- - ------------------- ------------------- ---------- - ----------------------------------- ----------- -------------------------------- ---
上述代码在源文件目录结构中读取 styles/less/styles.less
文件,将其编译为 CSS,并在编译后的文件中添加浏览器前缀,最后将编译后的CSS文件放置在编译后目录 dist/styles
中。
参数配置
常用参数如下:
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
browsers |
Array<Object> 或String |
['last 2 versions', '> 1%', 'IE 10'] |
指定浏览器版本作为前缀。 |
cascade |
Boolean |
true |
指定是否要按照属性分组,不同的属性插入含有多个前缀的每个前缀。 |
remove |
Boolean |
true |
指定是否移除不必要的前缀(例如,使用了补充性前缀时)。 |
add |
Boolean |
true |
指定是否添加缺少的前缀。 |
supports |
Boolean |
false |
指定是否添加适用于按规范编写的CSS和拥有未来语法的CSS的前缀。 |
flexbox |
Boolean |
true |
是否自动为旧版flexbox属性添加前缀,但是如果您使用了Autoprefixer核心库版本7.0.0以上,则flexbox属性不会自动添加前缀。 |
使用方法如下:
---- --------- ------ - ---------- --- - ---- -- ------- -------- ------ -- ----- ------- ----- -- -------- ---- ----- -- ------- --------- ----- -- -------------- -------- ---- -- ----------------- --
示例代码
--- ---- - ---------------- --- -- - ------------------- ------------------- ---------- - ----------------------------------- ---------- -- --- --------- ------ - ---------- -- ---- --- --- --- ---- -------- ------ ------- ----- ---- ----- --------- ----- -------- ---- --- -------------------------------- ---
总结
以上就是 gulp-ll 的使用方法和参数配置,它可以让我们在编写CSS时,更方便地处理浏览器兼容问题,提高我们的开发效率。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/62084