常用 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-17 02:20:42

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

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

执行 $ Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html Gulp 概述 Gulp 是一个构建工具,通过自动化处理

前端集成解决方案小结

前端集成解决方案 why? 浅谈前端集成解决方案 慕课网教程 项目大了就要考虑管理的问题 1,开发团队代码风格不统一,如何强制开发规范: 2,前期开发的组件库如何维护和使用: 3,如何模块化前端项目: 4,服务器部署前必须的压缩,检查流程如何简化,流程如何完善

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

在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

一.准备工作 1.什么是 npm? npm 是nodejs的包管理工具,主要功能就是管理.更新.搜索.发布node的包.Gulp 就是通过 NPM 安装的.关于 NPM 中文介绍,这里有一篇非常不错的文章:http://www.cnblogs.com/chyingp/p/npm.html 完整的 NPM 文档请看这里 :https://docs.npmjs.com 2.安装 Node.js 并升级 NPM 到最新版本 nodejs 安装:打开 nodejs.org 下载 nodejs 安装包,并

最有用的Gulp插件汇总

HTML&CSS autoprefixer - parse CSS and add vendor prefixes to rules by Can I Use. gulp-browser-sync - keep multiple browsers & devices in sync when building websites. gulp-useref - parse build blocks in HTML files to replace references to non-optim

前端集成解决方案(二)[进阶]

grunt files的处理方式: 1 grunt.initConfig({ 2 copy: { 3 dist: { 4 src: '<%= app %>/index.html', 5 dest: '<%= dist %>/index.html' 6 } 7 }, 8 9 clean: { 10 dist: { 11 src: '<%= dist %>/index.html' 12 } 13 } 14 }); 1 // 两个文件复制 2 grunt.initConfig

前端集成解决方案(五)[创建任务]

创建任务 //在命令行里输入grunt,自动执行concat:foo和uglify grunt.registerTask('default', ['concat:foo', 'uglify]); //在命令行里输入grunt dist,自动执行concat:foo和uglify:dist grunt.registerTask('dist', ['concat:foo','uglify:dist']); 多任务: 同时指定像grunt concat:foo或者grunt concat:bar这样的

Gulp 插件

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