npm 包 gulp-ll 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 gulp 是很常见的，因为它可以让我们自动化地完成很多重复性工作。而gulp-ll这个npm包则可以帮助我们在编译Sass/Less等预处理器时，同时还能自动添加浏览器前缀。

安装

使用 npm 进行安装：

npm install gulp-ll --save-dev

使用方法

先将gulp引入：

var gulp = require('gulp');

然后 require gulp-ll 并在 Gulpfile 中添加几行代码即可轻松的使用它。

var gulp = require('gulp');
var ll = require('gulp-ll');

gulp.task('styles', function() {
  gulp.src('styles/less/styles.less')
    .pipe(ll())
    .pipe(gulp.dest('dist/styles'));
});

上述代码在源文件目录结构中读取 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属性不会自动添加前缀。

使用方法如下：

ll({
  browsers: ['last 2 versions', 'IE > 8'], // 浏览器版本规则
  cascade: false, // 不分组属性
  remove: true, // 移除不必要的前缀
  add: true, // 添加缺失的前缀
  supports: true, // 是否添加CSS规范未来的写法
  flexbox: true   // 是否自动添加旧版flexbox前缀
})

示例代码

-- -------------------- ---- -------
--- ---- - ----------------
--- -- - -------------------

------------------- ---------- -
  -----------------------------------
    ---------- -- ---
      --------- ------ - ---------- -- ---- --- --- --- ----
      -------- ------
      ------- -----
      ---- -----
      --------- -----
      -------- ----
    ---
    --------------------------------
---

总结

以上就是 gulp-ll 的使用方法和参数配置，它可以让我们在编写CSS时，更方便地处理浏览器兼容问题，提高我们的开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/62084