gulp插件autoprefixer

 gulp的autoprefixer插件可以根据我们的设置帮助我们自动补全浏览器的前缀(如:-moz、-ms、-webkit、-o)

  1)首先安装gulp,不知道怎么安装请看这里

  2)安装autoprefixer插件

  3)主要要在gulpfile.js文件引入autoprefixer,然后在添加autopre任务。完整代码如下

 1 // 载入外挂
 2 var gulp = require(‘gulp‘),
 3     autoprefixer = require(‘gulp-autoprefixer‘);
 4
 5 gulp.task(‘autopref‘, function () {
 6     //找到src目录下app.css,为其补全浏览器兼容的css
 7     gulp.src(‘css/basic.css‘)
 8         .pipe(autoprefixer({
 9             browsers: [‘last 5 versions‘, ‘Android >= 4.0‘],
10             cascade: true, //是否美化属性值 默认:true 像这样:
11             //-webkit-transform: rotate(45deg);
12             //        transform: rotate(45deg);
13             remove:true //是否去掉不必要的前缀 默认:true
14         }))
15         //输出到dist文件夹
16         .pipe(gulp.dest(‘dist‘));
17 });

  4)antoprefixer()函数的参数介绍

    browsers:[]  (定义使用的浏览器版本)

    cascade : true  (定义对属性进行对齐操作)

    remove : true (去掉不必要的前缀)

browsers的推荐值为:???

  

  

时间: 2024-10-10 02:18:49

gulp插件autoprefixer的相关文章

Gulp插件autoprefixer的使用

1.创建:gulpfile.js //引入插件 var gulp = require('gulp'); var autoprefixer = require('gulp-autoprefixer'); //默认执行任务 gulp.task('default', function () { //找到src目录下app.css,为其补全浏览器兼容的css return gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 ve

gulp 插件之 gulp-autoprefixer

gulp-autoprefixer 的简介: gulp-autoprefixer 插件用来自动给 css 文件样式添加浏览器前缀. 一.gulp-autoprefixer 插件的使用 1.安装 "gulp-autoprefixer"插件命令(在终端进入到项目根目录执行) npm install --save-dev  gulp-load-plugins gulp-autoprefixer 2.在项目根目录下提供 "gulp-autoprefixer" 插件任务配置需

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

如何编写一个gulp插件

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through

Gulp 插件

Gulp 插件 前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gul

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

gulp 插件之 del

del 模块的简介: 你也许会想要在编译文件之前删除一些旧文件.由于删除文件和文件内容并没有太大关系,所以,我们没必要去使用一个 gulp 插件.最好是选择使用一个原生的 node 模块,因为 del 模块支持多个文件以及模式匹配,因此,我们将使用它来删除文件. 一.del 模块的使用 1.安装 "del"插件命令(在终端进入到项目根目录执行) npm install --save-dev  gulp del 2.在项目根目录下提供 "del" 插件任务配置需要的

gulp插件(gulp-jmbuild),用于WEB前端构建

源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp插件,用于WEB前端构建 安装 进入您做为构建工具用的目录 1.首先安装gulp $ npm install -g gulp $ npm install --save-dev gulp 2.安装其它依赖[q/gulp-jshint]. $ npm install q $ npm install gu

gulp 插件之 gulp-clean-css 和 gulp-make-css-url-version

gulp-clean-css 和 gulp-make-css-url-version 的简介: gulp-clean-css 插件用来压缩 css 文件. gulp-make-css-url-version 插件用来给 css 文件里的 url 加版本号(根据引用文件的 MD5 生成版本号). 一.gulp-clean-css 和 gulp-make-css-url-version 插件的使用 1.安装 "gulp-clean-css 和 gulp-make-css-url-version&qu