在项目中使用gulp

在项目中使用gulp

http://pampang.github.io/2016/02/02/%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8gulp/

目录

为什么要使用gulp？

使用gulp之后，我们的技术选型是怎样的？

使用gulp之后，我们的项目可以变成怎么样？

使用gulp之后，我们的项目怎么放？

现在有什么gulp命令？

有啥管用不花钱的东西？

还有什么我要注意的？

1. 我们离模块化的开发还有多远？

我们的目的是制造一个通过命令行，解决所有重复性工作的工作环境。

能够自行完成的操作，就不要让我动手指！

能用键盘解决的问题，就不要让我用鼠标！

能够重复使用的东西，就不要让我重新写！

拒绝重复性工作，只专注于项目中。

没有标准，我们制造标准。

越省心，越健康！

1. 为什么要使用gulp？

作为一个前端重构工程师，在开发的时候，我们需要同时管理：

HTML

CSS

JavaScript

还有一大堆的图片、字体、swf等等。

前端发展到现在了，你还让我写静态页面，让我来回复制HTML结构，实在是太太糟糕。

于是，各种编译工具层出不穷，sass、less、ejs、coffeeScript等，极大的解放了我们的生产力，让我们越来越省心。

但是，

编译sass要开个命令行打compass

压缩个png需要打开tinypng.com来做

编不下去了…

很多时候，我们在做很多重复性的工作，但这实际上是对生产无益，同时，这些操作亦是可以略去的。

怎么略去？对的，gulp可以帮到你。

我们的目的是制造一个通过命令行，解决所有重复性工作的工作环境。

在一般情况下，只要我们输入

gulp

这一个命令，我们就能够得到——ejs、sass、js、png…等文件的编译、压缩，同时！它还能监听上述文件的改动，每当有改动，都能够重新编译一遍，保证我们用到的都是最新的。

打一个比方：

平时我们在使用compass的时候，一般会在命令行打

compass watch

来进行任务。

假如我现在要加入ejs，加入png，加入很多东西呢？

compass watch

能解决吗？

gulp能够批量化的处理很多自动化的工作，一句gulp == compass watch * n!

现在，四个字母:

gulp

便可解决一切。

2、使用gulp之后，我们的技术选型是怎样的？

在使用gulp之后，我们当然要将前端三剑侠——html, css, javascript都弄的自动化，模块化啦！

因此，技术选型，必须够潮够模块！

HTML –> EJS

CSS –> SASS

JavaScript –> SeaJS

png还是那个png，但是是被压缩的

font还是那个font，但是是被抽离的(构建中)

因此，我们整个编写项目的环境，就能够实现一块一块的管理了。

未来的展望：

需求分类 –> 直接引用现成的初始化模板

模块化开发 –> 模块信手拈来，拿起就用

拒绝盲目复制，胡乱翻箱倒柜

3、使用gulp之后，我们的项目可以变成怎么样？

在我手上的一个需求——仙语移动官网上，我做了第一次的大胆尝试，希望能够给大家带来一点思考。

1、HTML –> EJS

因为一个完整的HTML需要至少两个东西：1、结构；2、数据内容。

因此，我大胆的将EJS分为两块：

结构，也就是模块，以下划线“_”开头。存放在app/ejs/文件夹中，通过app/*.ejs来调用。

数据内容，针对每个成品页面，创建一个json文件，例如index.ejs使用index.json内的数据。数据存放在app/data/文件夹中。

2、CSS –> SASS

大家都SASS都懂，也都在用，的确非常方便。

针对于当前EJS的目录结构，觉得SASS目录应如下：

每一个EJS模块都能配有一个SASS文件，存放在sass同级目录下，以下划线开头。

例如： _activity.ejs 对应 _activity.sass

每一个EJS成品页面都能配有一个SASS文件，存放在sass同级目录下，不以下划线开头。

例如： index.ejs 对应 index.sass

配合BEM编写风格使用，效果更佳！

3、JavaScript –> SeaJS

SeaJS的使用，由勇哥为我们讲解一下。

4、使用gulp之后，我们的项目怎么放？

项目目录结构（本结构的所有权归勇哥所有）

[lib]               //公共库（通常无需要做合并处理）
[jquery]
jquery_1.7.2.js
jquery_1.7.2_min.js
[...]

[app]               //用于存放所有项目
[p01]           //项目一
[src]       //项目源文件
[sass]
_data.scss
public.scss
index.scss
list.scss

[js]
_module1.js
_module2.js
main.js

[ejs]
header.ejs
footer.ejs

[images]
[_button]
a.png
a.psd
b.png
b.psd
other.png
[...]

[data]
index.json
list.json

[media]
video.mp4
audio.mp3

[swf]
button.swf
bg.swf

[font]
fscy.ttf
04_08b.ttf

index.ejs
list.ejs
article.ejs
[dist]      //编译出来的项目
[style]
public.css
index.css
list.css

[js]    //如果未做构建则跟源目录一样
_module1.js
_module2.js
main.js

[images]
_button_fj9ncm85.png
other.png

[media]
video.mp4
audio.mp3

[swf]
button.swf
bg.swf

[font]  //字蛛处理过的
fscy.ttf
fscy.svg
fscy.woff
fscy.eot
04_08b.ttf
04_08b.svg
04_08b.woff
04_08b.eot

index.html
list.html
article.html

[...]

[util_sass]         //公共sass模块
_p_reset.scss
_m_reset.scss
_pm_arrow.scss
_p_pop.scss

[util_ejs]          //公共ejs模块
_p_gw_topBar.ejs
_p_gw_footer.ejs
_p_zt_Footer.ejs
_p_hd_lottery.ejs

[util_js]           //公共js模块
_p_pop.js
_p_tip.js

[util_tpl]          //公共项目模版
[p_zt01]        //跟项目目录结构一样
[m_zt01]        //跟项目目录结构一样

5、现在有什么gulp命令？

gulp ejs –> 编译ejs为html

gulp sass –> 编译sass为css

gulp js –> 编译js，检测语法错误

gulp move –> 迁移不需做处理的项目，从src到dist

gulp png –> 压缩png

gulp jpg –> 压缩jpg

gulp gif –> 压缩gif

gulp svg –> 压缩svg

gulp img –> 执行png、jpg、gif、svg任务。

gulp watch –> 创建监听器，监听当前目录下的改动

gulp build –> 执行ejs、sass、js、img、move任务。

gulp default –> 执行build、watch任务。

gulp cpfont -f [your font name] –> 从util_font/文件夹中将需要用到的字体复制过来

gulp cptpl -s [tpl name] -d [your project name] –> 从util_tpl/文件夹中将指定的初始化模板复制到app中，并改为你指定的名字

注意！

这个任务的执行目录为app/，而不是项目内。

gulp font [-s htmlFileName -s htmlFileName -s htmlFileName … ] –> 根据html内容压缩字体。默认是遍历所有HTML文件，亦可指定某一个或多个HTMl文件。

注意！

如果存在一个字体文件无法编译通过，则会报错。

如果存在一些文字，字体文件无法适配，则会报错。

一般报错的形式如下：

events.js:141
throw er; // Unhandled 'error' event
^
Error: Repeat unicode, glyph index: 1
at Object.error.raise (F:\try\node_modules\fonteditor-core\ttf\error.js:28:13)
at F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:93:27
at Array.forEach (native)
at F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:91:26
at Array.forEach (native)
at TTFWriter.resolve (F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:87:14)
at TTFWriter.write (F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:217:13)
at minifyTtf (F:\try\node_modules\fontmin\plugins\glyph.js:97:29)
at Through2._transform (F:\try\node_modules\fontmin\plugins\glyph.js:153:27)
at Through2.Transform._read (F:\try\node_modules\fontmin\node_modules\readable-stream\lib\_stream_transform.js:184:10)

gulp del –> 清除dist/目录下的所有东西。

gulp pack –> 运行了del和build任务，意思是将最终的结果重新打包，然后我们就可以将dist/目录下的东西提交交付了。

6、有啥管用不花钱的东西？

有！

在APP/文件夹的同级目录下，有:

util_ejs/ 存放可以共用的ejs模板

util_font/ 存放特殊的font字体文件

util_sass/ 存放可以共用的sass模板

util_tpl/ 存放标志性的初始化模板，针对不同的需求量身定制

现在就动手，快点开始去填充内容吧！

7、还有什么我要注意的？

要注意的，可能是目录结构的存放。

谨记：

src/目录是我们日常开发所操作的目录。我们的任何代码添加、修改都应该在src/目录下进行，然后让gulp将我们的代码编译并打包到dist。

不要操作dist/目录下的任何东西！因为这样没任何意义。