gulp常用的plugin描述（陆续更新）

最新推荐文章于 2025-11-25 13:59:03 发布

原创最新推荐文章于 2025-11-25 13:59:03 发布 · 284 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#gulp #plugin #sourcemaps #autoprefixer #sass

gulp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了几种常用的前端自动化工具，包括用于文件合并的gulp-concat、用于JS文件压缩的gulp-uglify、用于生成源码映射文件的gulp-sourcemaps、用于CSS3代码兼容性补全的gulp-autoprefixer以及用于Sass编译的gulp-sass，并简要说明了browser-sync的作用。

gulp-concat
用来合并文件的，可以将多个文件进行合并，比如js、css等
使用方法可参看
https://www.npmjs.com/package/gulp-concat

gulp-uglify
用来压缩js文件的工具
相关配置如下
https://github.com/terinjokes/gulp-uglify

gulp-sourcemaps
用来将对应管道中的文件生成.map文件，而.map文件的作用就是让浏览器在对应加载的代码上找到映射的源，比如通过加载的css找到对应的sass
关于.map可以参看
http://www.cnblogs.com/vajoy/p/3992411.html

gulp-autoprefixer
代码兼容性自动补全
https://github.com/postcss/autoprefixer
对于CSS3的代码而言，各家浏览器需要编写的代码不一样，所以还需要各自的编写，webstorm已经提供这一功能，但是并不是所有的都可以自动补全，所以这里面用到了这个，来帮助我们将CSS代码自动补全兼容的代码内容。
比如：

:fullscreen a {
    display: flex
}

补全后就是

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

gulp-sass
这个不用多说了，看名字就知道，编译sass的，但是这里提出一嘴就是，下载这个不知道为啥总下载失败，然后墙外下载就没问题，墙内的话可能只能下载一半，运行时候才有问题。

browser-sync
用来启动一个web服务，是的可以通过HTTP的方式来调试web页面，也可以在里面进行配置访问代理，总的来讲就是一个通过node编写的web服务
http://www.browsersync.cn/docs/options/