Skip to content
Menu
Yuuk的博客
  • 首页
  • 前端技术
    • JavaScript
    • HTML & CSS
  • SEO
  • 设计
    • 素材分享
    • 设计教程
  • 随笔
Yuuk的博客

gulp-autoprefixer添加浏览器前缀插件报错的原因

Posted on 2015年12月22日2016年7月29日 by yuuk

最近捣鼓gulp自动化工具,使用了gulp-autoprefixer插件来实现添加浏览器前缀,结果运行起来发现报了一堆乱码的错误
(找不到报错截图了,大家脑补一下)
下面是我的gulp配置代码:

//自动编译LESS
gulp.task('watchLess', function () {
    gulp.watch(lessUrl + '*.less', function(event) {
        var paths = watchPath(event , lessUrl , cssUrl);
        //打印出日志
        console.log(paths.srcFilename + ' has ' + event.type);
        gulp.src([lessUrl + paths.srcFilename , '!'+lessUrl+'base/*.less'])
        //自动加浏览器前缀
        .pipe(autoprefixer({
            //兼容哪些版本浏览器
            browsers: ['last 2 versions','ie >= 9','Firefox >= 10','last 3 Safari versions'],
            //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: true,
            //是否去掉不必要的前缀 默认:true 
            remove:true 
        }))
        //编译less
        .pipe(less()) 
        //压缩css      
        .pipe(minifyCss())
        //输出到路径
        .pipe(gulp.dest(cssUrl));
    });
});

报错的原因就是autoprefixer插件和编译less插件的顺序放错了(/ □ \),应该是先编译less再添加浏览器前缀,以下是正确的代码:

//自动编译LESS
gulp.task('watchLess', function () {
    gulp.watch(lessUrl + '*.less', function(event) {
        var paths = watchPath(event , lessUrl , cssUrl);
        //打印出日志
        console.log(paths.srcFilename + ' has ' + event.type);
        gulp.src([lessUrl + paths.srcFilename , '!'+lessUrl+'base/*.less'])
         //编译less
        .pipe(less())
        //自动加浏览器前缀
        .pipe(autoprefixer({
            //兼容哪些版本浏览器
            browsers: ['last 2 versions','ie >= 9','Firefox >= 10','last 3 Safari versions'],
            //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: true,
            //是否去掉不必要的前缀 默认:true 
            remove:true 
        }))        
        //压缩css      
        .pipe(minifyCss())
        //输出到路径
        .pipe(gulp.dest(cssUrl));
    });
});
打赏赞(1)分享

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

搜索

近期文章

  • 宝塔面板中使用docker部署nodejs应用
  • 如何将docker镜像上传到阿里云
  • React Native 报错 No bundle URL present 解决方法
  • axios 给每一个请求添加耗时统计
  • css filter属性导致fixed失效

标签

addEventListener ajax ajax跨域 chatAt css居中 DNS缓存 docker gulp ie7 json jsonp margin memcache mysql nodejs ps技巧 typescript void vpn vuejs wampserver webpack win10 XMLHttpRequest z-index 事件冒泡 事件绑定 内容发布时间 图片加载 大写 字符串 封装ajax 广告屏蔽 批量修改图层名称 水平垂直居中 注册码 特殊符号 百度 空元素 站长平台 网页快照 负边界 递减 随机数 首字母

友情链接

  • 蔡甸新闻网
©2025 Yuuk的博客 | 鄂ICP备13014750号-9