Gulp 插件

Gulp 插件

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务。本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解。如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp 。

由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总、排名不分先后。

本系列文章导航:

一、基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp
二、基于 Gulp 的前端集成解决方案 —— 执行 $Gulp 时发生了什么

插件安装

gulp 插件基于 nodejs ,安装一个Gulp 插件和安装普通 Nodejs 包的方法是一样的。只需  $npm --save-dev install 插件名  就可以完成安装。

1、gulp-sass

预编译 sass 文件为 css 文件,SASS 不多说,如果项目中有使用 sass ,那么这个插件应该是必备的。前面的一篇文章中,已经对该插件有所使用了,可配置编译后输出风格、是否输出sourcemap 等常用选项。类似的项目还有 gulp-scss / gulp-sassdoc / compass

安装: $npm install --save-dev gulp-sass

文档:https://www.npmjs.com/package/gulp-sass/

2、browser-sync

保持多浏览器、多设备同步、在前端开发是非常有用,可谓是必备组件。

安装:npm install browser-sync

文档:http://www.browsersync.io

3、gulp-imagemin

压缩 png/jpg/git/svg 格式图片文件

安装:$ npm install --save-dev gulp-imagemin

文档:github.com/sindresorhus/gulp-imagemin

4、gulp-gzip

Gzip 插件

安装:npm install gulp-gzip

文档:github.com/jstuckey/gulp-gzip

5、gulp-inject

一个 js/css/webComponet注入插件,browser-sync里面继承了该组件,如果使用browser-sync就不必要再单独安装gulp-inject了

安装:npm install gulp-inject

文档:github.com/klei/gulp-inject

6、gulp-markdown

markdown 不用多说,这个基本上都要用到。

安装:npm install gulp-markdown

文档:github.com/sindresorhus/gulp-markdown

7、gulp-plumber

错误处理插件,如果不希望总是因为错误而中断任务的话,那么它几乎是必备组件。

安装:npm install gulp-plumber

文档:github.com/floatdrop/gulp-plumber

8、gulp-minify-css

压缩CSS文件,几乎也是必备

安装:npm install gulp-minify-css

文档:github.com/murphydanger/gulp-minify-css

9、gulp-rename

重命名文件的插件,当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css

安装:npm install gulp-rename

文档:github.com/hparra/gulp-rename

10、gulp-concat

顾名思义,用来整合文件用的。很常用

安装:npm install gulp-concat

文档:github.com/wearefractal/gulp-concat

写在最后

本文将持续更新,以收录一些非常有趣或常用的gulp插件。

关于本文如果您有任何建议或疑问请在下面留言交流,也可通过 Web前端高级工程师 群进行线上沟通。

时间: 2024-10-05 05:21:34

Gulp 插件的相关文章

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下安装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-mock-server

本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样可以一定程度上实现前后端分离,约定好接口之后,前后端即可同时开发,从而提高效率. 在gulpfile里新建任务: //mock server gulp.task('mock', function() { gulp.src('.') .pipe(g.mockServer({ port: 8090 })); }); 在项目根目录下新建data文件夹,里面放json文件.举个栗子,我们在data里放了

gulp插件使用

1 //引入gulp组件 2 var gulp=require('gulp'); 3 4 //创建任务 5 gulp.task('hello',function(){ 6 console.log('hello'); 7 }); 8 //创建另一个任务 9 gulp.task('world',function(){ 10 console.log('world'); 11 }); 12 //默认执行两个任务 13 //一个gulpfile.js中只能有一个default 14 //三种写法,3个参数

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

Gulp插件less的使用

1.创建:gulpfile.js var gulp = require('gulp'), less = require('gulp-less'); gulp.task('default', function () { gulp.src('less/index.less') .pipe(less()) .pipe(gulp.dest('dist')); }); 2.创建package.json npm init 3.安装gulp到项目 npm install --save-dev gulp 4.安