Front-End Gulp 前端开发集成解决方案

王叨叨 | 2016-08-15 | 分类 笔记  | 标签 gulp 

概述

FEG 是一个基于 gulp/gulp-plugins 的前端开发集成解决方案。FEG 定义了一系列任务,这些自动执行的任务可以把你从繁杂无聊的复制、粘贴、压缩、重命名、打包等事务中解脱出来,从而更专注于具体业务的开发实现。

特性

集成了常用任务,后期会增加更多功能:

功能 描述
gulp-sass SASS文件编译
gulp-clean-css 压缩CSS
gulp-iconfont 把SVG图标制作成字体图标
gulp.spritesmith 合并雪碧图
gulp-file-include 引用HTML模版
gulp-livereload 实时刷新
gulp-webserver 开启本地服务
gulp-zip 文件打包

安装 FEG

1、获取 FEG 包

$ git clone https://github.com/wangdaodao/feg.git

2、进入FEG目录

$ cd feg

3、安装 FEG

$ npm install

4、帮助

$ gulp h

5、开始

$ gulp s

6、打包

$ gulp b

由于网络问题安装过程会持续一段时间,请耐心等候。

如何使用

1、进入项目目录 FEG/ 执行 gulp s 命令。此时浏览器会自动打开,并且实时响应你的代码变化(需自行安装livereload插件)。

2、进入根目录进行开始工作。

3、SVG图标预览在svg/icon.html

4、打包代码自动生成到build文件夹下。

常见问题

由于网络原因安装过程中极有可能出现安装失败,解决方案:

  1. 使用其他源
  2. 重新尝试 npm install
  3. 试试cnpm
  4. hi@wangdaodao.com

鸣谢

FEG 用到了很多开源软件包,没有这些开源项目就没有FEG,在此对相关开源团队表示由衷的感谢!

LICENSE

The MIT License (MIT)

如果觉得此篇文章对您有帮助,希望可以请我喝雪碧!请我喝雪碧

上一篇   下一篇   返回顶部