整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Gulp 插件介绍

Gulp 插件介绍

面我们讲到在学习压缩 JS、CSS、图片等文件时,需要用到一些相关的插件。Gulp 提供了一些有用的插件来处理 HTML 和 CSS,JavaScript,图形以及一些其他内容。下面我们来看一下 gulp 中的一些不同类型插件。

HTML和CSS插件

插件

描述

autoprefixer

自动包含 CSS 属性的前缀

gulp-browser-sync

用于监视 CSS 目录中的所有 HTML 和 CSS 文件,并在文件更改时对所有浏览器中的页面执行实时重新加载

gulp-useref

用于替换对非优化脚本或样式表的引用

gulp-email-design

创建 HTML 电子邮件模板,将 CSS 样式转换为内联

gulp-uncss

优化 CSS 文件和查找未使用和重复的样式

gulp-csso

是一个 CSS 优化器,可以最小化 CSS 文件,从而缩小文件大小

gulp-htmlmin

最小化 HTML 文件

gulp-csscomb

用于制作 CSS 的样式格式化程序

gulp-csslint

它指定一个 CSS linter

gulp-htmlhint

指定一个 HTML 验证器

JavaScript插件

插件

描述

gulp-autopolyfiller

它与 autoprefixer 相同,包括 JavaScript 的必要 polyfill

gulp-jsfmt

用于搜索特定的代码段

gulp-jscs

用于检查 JavaScript 代码样式

gulp-modernizr

指定了用户浏览器提供的 HTML,CSS 和 JavaScript 功能

gulp-express

启动了gulp express.js 网络服务器

gulp-requirejs

使用 require. js 将 require.js AMD 模块组合成一个文件

gulp-plato

生成复杂性分析报告

gulp-complexity

分析了代码的复杂性和可维护性

fixmyjs

修复了 JSHint 的结果

gulp-jscpd

用作源代码的复制/粘贴检测器

gulp-jsonlint

是 JSON 验证器

gulp-uglify

缩小了 JavaScript 文件

gulp-concat

连接 CSS 文件

单元测试插件

插件

描述

gulp-nodeunit

运行 Gulp 的节点单元测试

gulp-jasmine

用于报告与输出相关的问题

gulp-qunit

为 QUnit 测试提供基本的控制台输出,并使用 PhantomJS 节点模块和 PhantomJS 运行器 QUnit 插件

gulp-mocha

指定了 Mocha 周围的薄包装并运行 Mocha 测试

gulp-karma

已在 Gulp 中弃用

图形插件

插件

描述

gulpicon

从 SVG 生成精灵并将它们转换为 PNG

gulp-iconfont

与 Web 字体一起用于从 SVG 创建 WOFF,EOT,TTF 文件

gulp-imacss

将图像文件转换为数据 URI 并将它们放入单个 CSS 文件中

gulp-responsive

为不同的设备生成响应式图像

gulp-sharp

它用于更改和调整图像的方向和背景

gulp-svgstore

将 SVG 文件与元素组合成一个文件

gulp-imagemin&gulp-tinypng

用于压缩 PNG,JPEG,GIF,SVG 等图像

gulp-spritesmith

用于从一组图像和 CSS 变量创建 spritesheet

编译器插件

插件

描述

gulp-less

为 Gulp 提供了少量插件

gulp-sass

为 Gulp 提供 SASS 插件

gulp-compass

为 Gulp 提供指南针插件

gulp-stylus

用于将手写笔保存在 CSS 中

gulp-coffee

为 Gulp 提供 coffeescript 插件

gulp-handlebars

为 Gulp 提供了把手插件

gulp-jst

在 JST 中提供下划线模板

gulp-react

将 Facebook React JSX 模板指定为 JavaScript

gulp-nunjucks

在 JST 中指定 Nunjucks 模板

gulp- dustjs

在 JST 中指定了 Dust 模板

gulp-angular-templatecache

在 templateCache 中指定 AngularJS 模板

其他插件

gulp-clean 插件删除文件和文件夹,gulp-copy 插件将文件从源文件复制到新目的地。

插件

描述

gulp-grunt

从 Gulp 运行 Grunt 任务

gulp-watch

无论何时进行更改,它都会监视文件

gulp-notify

只要任务失败,它就会通知错误消息

gulp-git

它允许使用 Git 命令.

gulp-jsdoc

为 Gulp 创建 JavaScript 文档

gulp-rev

它提供对文件名的静态资产修订

gulp-bump

增加了 JSON 包中的版本

gulp-bower-files

用于注入凉亭包

gulp-removelogs

删除了 console.log 语句

gulp-preprocess

根据上下文或环境配置预处理 HTML,JavaScript 和其他文件

gulp-connect

它用于运行 LiveReload 的 Web 服务器

gulp-shell

运行 Shell 命令

gulp-ssh

使用 SSH 和 SFTP 任务进行连接

gulp-zip

它压缩文件和文件夹

gulp-util

为 gulp 插件提供实用工具

gulp-filesize

它以人类可读的格式指定文件大小

么是Dgeni?

Dgeni是Angular团队开始的一个非常强大的NodeJS文档生成工具,所以说,不光是Angular项目,也可以运用到所有适用TypeScript、AngularJS、Ionic、Protractor等项目中。

主要功能就是将源代码中的注释转换成文档文件,例如HTML文件。而且还提供多种插件、服务、处理器、HTML模板引擎等,来帮助我们生成文档格式。

如果你之前的源代码注释都是在JSDoc形式编写的话,那么,你完全可以使用Dgeni创建文档。

那么,开始吧!

一、脚手项目

首先先使用angular cli创建一个项目,名也:ngx-dgeni-start

lurAdmin 是国外的一款使用 AngularJs 和Bootstrap实现的单页管理端模版。

页面非常酷炫,视觉冲击极强,各种动画效果高大上。github有9700多个star。

开源地址:https://github.com/akveo/blur-admin

demo地址:http://akveo.com/blur-admin/#/dashboard

截几个页面大家先看看:

写页面的时候,拿来模仿下别人的实现也是极好的。

部署方法:

首先安装完git 跟 nodejs。

然后输入命令:

git clonehttps://github.com/akveo/blur-admin.git

下载模板, 改变默认的npm查找包的站点

Npm config set registry https://registry.npm.taobao.org

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装bower

npm install -g yo gulp bower

安装generator-gulp-angular

npm install -g generator-gulp-angular

安装模板

Cd blur-admin
cnpm install

启动

gulp serve

打包生成

gulp serve:dist

然后将打包好的文件copy到tomcat中的相应项目文件中,即可访问部署了